阅读 116

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)
}
)
复制代码

拦截器 - 拦截响应

拦截返回值,如:resulterror中的不同的状态码需要操作,或者返回的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'
	})
}
复制代码
文章分类
前端
文章标签