这里写自定义目录标题
关于axios
Axios 是什么?
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
文档地址:https://www.axios-http.cn/docs/intro
特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
安装
使用 npm或者其他(yarn)等等
$ npm install axios
axios 二次封装
原因:
-
- 不用每次请求都重新写一些重复性的,减少代码量,减低维护难度。
-
- 统一处理一些常规的问题,如:http错误。
-
- 拦截请求和响应,提前对数据进行处理,如:获取token,修改配置项。响应是报错处理提醒
// 导入axios
import axios from 'axios'
// 利用axios对象的create方法,去创建一个axios实例
const api = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, // 地址(可以根据不地址配置)
timeout: 5000, // 请求超时时间,提示用户请求超时
// withCredentials: true // // `withCredentials` 表示跨域请求时是否需要使用凭证,默认false
})
/**
* 设置请求数据参数传递的格式,默认是json格式
* 看服务器要求什么格式,设置一个默认常用的,后请求里还可以修改覆盖
*/
api.defaults.headers['Content-Type'] = 'application/json'
// interceptors 是 axios 的拦截器:在请求或者响应被then或者catch处理前拦截
/**
* 添加请求拦截
* -- 发起请求前做的事情
*/
api.interceptors.request.use(function (config) {
// 发送请求前做些什么(添加token、cookie之类的)
// let token=localStorage.getItem('token')
// token && (config.headers.Authoriztion=token)
return config;
}, function (err) {
// 做错误处理
return Promise.reject(err)
})
/**
* 添加响应拦截
* 服务器端返回信息->[响应拦截器]->客户端js获取到信息
* response中包含属性:
* data:相应数据,status:响应状态码, statusText:响应状态信息,
* headers:响应头, config:响应提供的配置信息, request
*/
api.interceptors.response.use(function (res) {
// 2xx 范围内的状态码都会触发该函数(这里做响应成功后处理)
return res.data;//将主体内容返回 axios.get().then(result=>{拿到的就是响应主体});
}, function (err) {
// 超出2xx 范围的状态码触发该函数(做错误处理)
// 如果有返回结果
if (err) {
switch (err.status) {
//这里面根据公司需求进行写
case 404:
//进行错误跳转之类
break;
case 501:
//进行提示之类的弹窗
break;
case 502:
//进行提示之类的弹窗
break;
}
} else {
//服务器没有返回结果 分两种情况 断网 服务器崩了
if (!window.navigator.onLine) {
//断网处理:跳转到断网页面
return
}
return Promise.reject(err)
}
})