axios的网络模块
一、axios的介绍
官方网站：https://github.com/axios/axios
直接查看官方网站就行
概念：Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中，API。
作用：
浏览器中创建XMLHttpRequests
从node.js中创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF
安装命令：npm install axios
使用：import axios from 'axios'
二、发送基本请求
get请求：
axios对象调用get方法，.then()成功回调，.catch()失败回调。
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});post请求:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});通用的请求：
axios({
methods: 'post',
url: 'http://jsonplaceholder.typicode.com/users',
data: {
name: 'qiurx'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})三、axios创建实例
let instance = axios.create({
url: 'http://jsonplaceholder.typicode.com/users',
imeout: 3000,
method: 'post'
});
//即可调用方法，和axios实例同
instance.get('http://jsonplaceholder.typicode.com/users').then(Response=>{
console.log(Response);
});四、axios拦截器的使用
您可以先拦截请求或响应，然后再由then或处理catch。
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
});五、实例展示
1.目录结构
2.main.js文件
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
/*//1.axios的基本使用方式
axios({
url:'http://123.207.32.32:8000/home/multidata',
//method:'post' 使用post的请求
}).then(res=>{
console.log(res);
})
axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'pop',
page:'1'
}
}).then(res=>{
console.log(res);
})
//2.axios发送并发请求
axios.all([
axios({
url:'http://123.207.32.32:8000/home/multidata',
}),
axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'sell',
page:5
}
})
]).then(results => {
console.log(results);
console.log(results[0]);
console.log(results[1]);
})
//3.使用全局的axios和对应的配置在进行网络请求
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.all([axios({
url: '/home/multidata'
}), axios({
url: '/home/data',
params: {
type: 'sell',
page: 5
}
})]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))*/
/*
当请求多个不同的服务器的时候会出现问题
axios.defaults.baseURL = 'http://222.111.33.33:8000'
axios.defaults.timeout = 10000
axios({
url: 'http://123.207.32.32:8000/category'
})
*/
//4.创建对应的axios的实例
/*
const instance1 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
instance1 ({
url: '/home/multidata'
}).then(res=>{
console.log(res);
})
instance1({
url:'/home/data',
params:{
type:'pop',
page:1
}
}).then(res=>{
console.log(res);
})
*/
/*const instance2= axios.create({
baseURL: 'http://222.111.300.32:8000',
timeout: 10000,
//headers:{}
})*/
//5.封装request模块
import {request} from "./network/request";
//调用request函数，传入参数，并进行回调
/*
//5.1
request({
url:'/home/multidata'
},res => {
console.log(res);
},err=>{
console.log(err);
})*/
/*//5.2
request({
baseConfig:{
url:'/home/multidata'
},
success:function (res) {
console.log('数据回调成功！！！');
console.log(res);
},
failure:function (err) {
console.log('数据回调不成功！！！');
console.log(err);
}
})*/
//5.3-4
request({
url: '/home/multidata'
}).then(res => {
console.log('数据回调成功！！！');
console.log(res);
}).catch(err => {
console.log('数据不回调成功！！！');
console.log(err);
})
3.App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<h2>也可以在App.vue中使用1、2、3</h2>
<div>{{result}}</div>
<hr>
<HelloWorld></HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
//1.导入框架
import axios from 'axios'
export default {
name: 'App',
components: {
HelloWorld
},
//2.数据处理
data(){
return {
result:''
}
},
//3.在实例创建时发送请求
created() {
axios({
url:'http://123.207.32.32:8000/home/multidata'
}).then(res=>{
//console.log(res);
this.result =res;
})
}
}
</script>
<style>
</style>4.request.js
import axios from 'axios'
//创建网络请求模块
//导入axios框架
//5.4
export function request(config) {
//1.创建axios的实例
const instance =axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//2.axios的拦截器
//2.1请求拦截的作用
instance.interceptors.request.use(config =>{
console.log('axios的request拦截')
//console.log(config);
//2.1.1比如config中的一些信息不符合服务器的要求
//2.1.2比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
//2.1.3某些网络请求(比如登录(token)), 必须携带一些特殊的信息
return config; //拦截之后的数据，要释放返回
},error => {
//console.log(error);
})
//2.2response响应拦截
instance.interceptors.response.use(res=>{
//console.log(res.data);
//对响应的数据进行处理
return res.data;
},error => {
console.log(error);
})
//3.发送真正的网络请求
return instance(config)
}
/*//5.3
export function request(config) {
return new Promise((resolve,reject)=>{
//1.创建axios的实例
const instance =axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//发送真正的网络请求
instance(config)
.then(res=>{
resolve(res)
})
.catch(err=>{
reject(err)
})
})
}*/
/*//5.2
export function request(config) {
//1.创建axios的实例
const instance =axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//发送真正的网络请求
instance(config.baseConfig)
.then(res=>{
//console.log(res);
config.success(res);
})
.catch(err=>{
//console.log(err);
config.failure(err);
})
}*/
/*
//5.1
export function request(config,success,failure) {
//1.创建axios的实例
const instance =axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//发送真正的网络请求
instance(config)
.then(res=>{
//console.log(res);
success(res);
})
.catch(err=>{
//console.log(err);
failure(err)
})
}*/
5.HelloWorld.vue
<template>
<h2>
HelloWorld的数据
<hr>
{{categories}}
</h2>
</template>
<script>
import axios from 'axios'
export default {
name: "HelloWorld",
data() {
return {
categories: ''
}
},
created() {
axios({
url: 'http://123.207.32.32:8000/category'
}).then(res => {
this.categories = res;
})
}
}
</script>
<style scoped>
</style>具体的操作，详情。
