axios封装

此文适用于新手封装

主要用于拦截请求和携带token

安装

npm i --save axios

完整代码

import axios from 'axios'
const instance = axios.create({
    baseURL: 'http://localhost:3001',
    timeout: 1000
});

// 拦截器 - 拦截请求
instance.interceptors.request.use(config => {
	// 可以在此处设置请求头携带token
	console.log('拦截请求');
	console.log(config)
	let token = localStorage.getItem('token');
  token && config.headers={ 'aa-token' : token };
    return config
}, error => {
    return Promise.reject(error)
}
)
// 拦截器 - 拦截响应
instance.interceptors.response.use(result => {
	console.log('拦截相应');
    return result
}, error =>{
	console.log(error)
    return Promise.reject(error)
})
export default instance;

创建axios实例

baseURL：请求地址

timeout：请求时间

官网的创建的实例上多增加了一个请求头，创建的实例用于增加拦截和后期导出

const instance = axios.create({
    baseURL: 'http://localhost:3001',
    timeout: 1000
});

拦截器 - 拦截请求

这里获取token的方式，随机定

config：成功一般返回的是完整的请求信息

error：失败的返回值

拦截发送的请求，在每个请求发送时进行处理，如：在请求头上增加token

instance.interceptors.request.use(config => {
	console.log(config)
	let token = localStorage.getItem('token');
  token && config.headers={ 'aa-token' : token };
    return config
}, error => {
    return Promise.reject(error)
}
)

拦截器 - 拦截响应

拦截返回值，如：result、error中的不同的状态码需要操作，或者返回的massage需要进行弹窗显示，可以在此处进行统一的处理

instance.interceptors.response.use(result => {
    return result
}, error =>{
	console.log(error)
    return Promise.reject(error)
})

请求时使用

Url：http://localhost:3001/eq ----- 创建实例时的url拿来进行拼接

method：如果不写默认发送GET

这里的request一整个是Promise不需要进行更多的处理

import request from '../uitls/request'

export function app(){
	return request({
		method:'GET',
		url:'/eq'
	})
}