1.引入
npm i axios
1)在src目录中创建一个request文件夹,创建request.js文件封装axios的全局变量、拦截器等;创建api.js管理具体接口
在request.js文件中
import axios from ‘axios’
import QS from ‘qs’ //引入qs模块,用来序列化post类型的数据
import {Toast} from ‘vant’ //引入vant组件的toast提示框组件
2)环境的切换,切换开发环境、测试环境和生产环境,使用axios.defaults.baseURL可以设置axios的默认请求地址
3)通过axios.defaults.timeout设置默认的请求超时时间
axios.defaults.timeout = 10000;
4)请求拦截
// 添加请求拦截器
axios.interceptors.request.use( config =>{
//每次发送请求前判断token,存在就在header加上token,果然过期所以在响应拦截器中要对返回状态进行判断
const token = localStorage.token;
token && (config.headers.Authorization = token);
return config;
}, error =>{
// 对请求错误做些什么
return Promise.reject(error);
});
5)响应的拦截,服务器返回给我们的数据,我们在拿到之前可以对他进行一些处理
// 响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
// 下面列举几个常见的操作,其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期,请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误,直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
});
6)封装get方法和post方法
封装get方法
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});
}
封装post方法,post方法必须要使用对提交从参数对象进行序列化的操作,所以这里我们通过node的qs模块来序列化我们的参数,所有使用import QS from ‘qs’
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err =>{
reject(err.data)
})
});
}
2.在api.js文件中管理接口
2-1)在api.js中引入我们封装的get和post方法
import { get, post } from ‘./http’
2-2)封装接口
export const apiAddress = params => post(‘地址’, params);
2-3)调用接口
import { apiAddress } from '@/request/api';// 导入我们的api接口
// 调用api接口,并且提供了两个参数
apiAddress({
type: 0,
sort: 1
}).then( res=>{
console.log(res)
})
站外资料:https://www.jb51.net/article/145341.htm