一、安装 axios 依赖
npm install axios --save
二、导入axios
import axios from 'axios'
三、基础用法
1、不传参数（默认是get请求 ）
axios({
url: 'http://httpbin.org/get',
method:'get'//可以省略 不写默认是get
}).then(res => {
console.log(res);
})
2、不传参数（第二种写法）
axios.get('http://httpbin.org/get').then(res => {
console.log(res);
})
3、传参（第一种写法）
axios({
url:'http://httpbin.org/get?type=sell&id=1'
}).then(res => {
console.log(res);
})
4、传参（第二种写法）
axios({
url:'http://httpbin.org/get',
params:{//专门针对get请求的参数拼接
type:'sell',
id:1
}
}).then(res => {
console.log(res);
})
因为支持 Promise 所以直接用 then 就可以拿到返回结果
注意：如果是get请求用params 传递参数，如果是post请求需要用data
四、axios 并发请求
说明：发送两个请求，这两个请求都到达后在执行。
使用 axios.all([axios(),axios(),axios()]).then()
axios.all([axios({
url: 'http://httpbin.org/get'
}), axios({
url: 'http://httpbin.org/get',
params: {//专门针对get请求的参数拼接
type: 'sell',
id: 1
}
})]).then(results => {
console.info(results)//得到是一个数据
})
直接then() 拿到的结果是个数据 ，使用axios.spread 拿到每个请求的返回结果
axios.all([axios({
url: 'http://httpbin.org/get'
}), axios({
url: 'http://httpbin.org/get',
params: {//专门针对get请求的参数拼接
type: 'sell',
id: 1
}
})]).then(axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
}))
五、axios全局配置
//全局配置完成后请求的时候直接写请求方法名称就行
axios.defaults.baseURL='http://httpbin.org/'
axios.defaults.timeout=5000
只能应对服务器在同一个地址里面，如果请求的数据不在同一个服务器用全局配置就不合适了。（比如：首页数据在一个服务器，列表数据在另一个服务器），那么就要创建对应的axios实例
六、创建对应的axios实例
第一个服务器地址 里面有多个请求，如果只有一个请求直接写个地址就行了，不用创建实例这么麻烦
const instance1 = axios.create({
baseURL: 'http://httpbin.org/',
timeout: 5000
})
instance1({
url: '/home'
}).then(res => {
console.log(res);
})
instance1({
url: '/list'
}).then(res => {
console.log(res);
})
第二个服务器地址，在创建一个axios实例
const instance2 = axios.create({
baseURL: 'http://192.168.1.1',
timeout: 6000
})
instance2({
url: '/list'
}).then(res => {
console.log(res);
})
七、axios网络封装
在src文件夹下面创建一个network文件夹，在创建一个request.js
export function 在里面可以导出多个，如果用export default 只能导出一个
1、第一种写法（回调函数方式）
import axios from "axios"
/**
*
* @param {请求地址} config
* @param {请求成功} success
* @param {请求失败} failure
*/
export function request(config, success, failure) {
//1.创建axios实例
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000
})
//2.发送真正的网络请求
instance(config).then(res => {
success(res)
}).catch(err => {
failure(err)
})
}
在页面调用
import { request } from './network/request'
request({
url: 'get'
}, res => {
console.log(res);
}, err => {
console.log(err);
})
2、第二种写法（回调函数方式）
import axios from "axios"
/**
*
* @param {config是一个对象,传入的时候所有的需要的都放到config里面了} config
*/
export function request(config) {
//1.创建axios实例
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000
})
//2.发送真正的网络请求
instance(config.baseConfig).then(res => {
config.success(res)
}).catch(err => {
config.failure(err)
})
}
在页面调用
request({ baseConfig: { }, success: function (res) { }, failure: function (err) { }})
3、第三种写法（Promise方式）
import axios from "axios"
/**
* Promise方式
* @param {*} config
* @returns
*/
export function request(config) {
return new Promise((resolve, reject) => {
//1.创建axios实例
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000
})
//2.发送真正的网络请求
instance(config)
.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
在页面调用
request({
url:'get'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.error(err);
})
4、第四种写法（Promise方式）推荐使用
import axios from "axios"
export function request(config) {
//1.创建axios实例
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000
})
//2.发送真正的网络请求 instance 本身返回就是Promise
return instance(config)
}
在页面调用
request({
url:'get'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.error(err);
})
八、axios 拦截器使用
为什么要做请求拦截，请求拦截的作用：
- 比如config中的一些信息不符合服务器的要求
- 比如每次发送网络请求时，都希望在界面中显示一个请求的图标
- 某些网络请求，必须携带一些特殊信息（比如登录需要携带token）
四种情况：
- 请求成功
- 请求失败
- 响应成功
- 响应失败
axios.interceptors 拦截全局
instance.interceptors 拦截创建的这个实例
instance.interceptors.request.use() 请求拦截（传两个函数，一个请求成功，一个请求失败）
instance.interceptors.response.use() 响应拦截（传两个函数，一个响应成功，一个响应失败）
拦截以后必须 return 出去，不然后面拿不到数据
import axios from "axios"
/**
* 拦截器使用
* @param {*} config
* @returns
*/
export function request(config) {
//1.创建axios实例
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000
})
//2.axios的拦截器
//axios.interceptors //这种写法是拦截全局
//instance.interceptors 拦截创建的这个实例
//request.use() 拦截请求，传两个函数，一个请求成功，一个请求失败
instance.interceptors.request.use(config => {
//为什么要做请求拦截，请求拦截的作用
//1.比如config中的一些信息不符合服务器的要求
//2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
//3.某些网络请求，必须携带一些特殊信息（比如登录需要携带token）
console.log(config);
return config //必须return出去，不然后面拿不到数据
}, err => {
console.log(err);
});
//响应拦截
instance.interceptors.response.use(res => {
console.log(res);
return res;//必须return出去，不然后面拿不到数据
}, err => {
console.log(err);
});
//3.发送真正的网络请求
return instance(config)
}
请求超时重新发送请求
import axios from 'axios'
import { Message } from 'element-ui';
import config from '../../config'
axios.defaults.timeout = 10000
axios.defaults.baseURL = config.url
// 请求拦截 加token
axios.interceptors.request.use(
config => {
if (sessionStorage.getItem('token')) {
config.headers.Authorization = JSON.parse(sessionStorage.getItem('token')).SignFlag
}
return config
},
err => {
return Promise.reject(err)
},
)
// 响应拦截 错误提示
axios.interceptors.response.use(
response => {
if (response.status === 200 && response.data && !response.data.isError && !response.data.isNoOpenID) { // 200 请求成功 并且 接口内部返回成功
return Promise.resolve(response.data)
// return response
} else {
Message.error(response.data.errorMessage || response.data.noOpenMessage || '接口出错')
return Promise.reject(response)
}
},
error => {
if (error.response?.status) {
switch (error.response.status) {
case 401: Message.error('未授权，请登录'); break;
case 403: Message.error('拒绝访问'); break;
case 404: Message.error('找不到请求'); break;
case 500: Message.error('请求错误'); break;
default:
Message.error(error.response.statusText)
}
}else{
var config = error.config;
config.retry = 1;
config.retryDelay = 1000;
if (!config || !config.retry) return Promise.reject(error);
config.__retryCount = config.__retryCount || 0;
if (config.__retryCount >= config.retry) {
Message.error('请求超时');
return Promise.reject(error);
}
config.__retryCount += 1;
var backoff = new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, config.retryDelay || 1);
});
return backoff.then(function () {
console.log('%c%s%o', 'color:red', '请求超时!重新发起请求:',JSON.parse(JSON.stringify(config)));
return axios(config);
});
// if(error.toString().includes('timeout')){
// Message.error('请求超时');
// return Promise.reject(error)
// }
}
return Promise.reject(error.response)
},
)
export default axios
