1.axios安装
npm install axios import axios from ‘axios‘
2.axios使用
使用格式是
1.axios({配置信息}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})
//res为得到的数据，其中res.data是得到的数据，其余都是axios自动携带的数据;
//axios整合了Promise的可存储功能，所以可以像对象一样储存得到的数据;
2.axios.get(‘url‘,{params:{内部放置get专用参数}}) ;
//get请求专用，放置在params中的参数会自动的衔接到url地址后，当然也可以直接写在url中;
3.axios。post(‘url‘,{data:{内部放置post专用参数}});
//post请求专用，post参数必须放置在设置的data属性中;
4.axios.delete(‘url‘,{});
5.axios.head(‘url‘,{});
6.axios.put(‘url‘,{});
....
axios最简单的申请依然是第一行
3.基础配置（全局配置）
axios（指最简单申请）只有一个参数`{配置参数}`，该参数在很多次请求中是有很多配置属性是重复的，所以可以设置一个全局配置，类似js对象的原型链配置
注意：全局配置后，本次项目所有的axios会默认使用该配置，全局配置下相同配置只能有一个，例如，不能同时存在两个baseURL
axios.defaults.配置属性 = ‘值’
//相当于修改了本次项目axios的默认属性
4.常用配置
请求地址 url:‘...‘
请求类型 method:get //默认为get
请求根路径 baseURL:"https://www.baidu.com/" //在url不为绝对定位的情况下，根路径会自动加在url之前
请求前的数据处理 transformRequest:(data)=>{...}
请求后的数据处理 transformResponse:(data)=>{...}
自定义请求头 headers:{...}
get请求参数 params:{...}
post请求参数 data:{...}
参数序列化（JSON）函数 paramsSerializer:(params)=>{...}
5.axios实例化
为何要实例化：由于全局配置关系，整个axios只能拥有一个全局配置，而实例化相当于可以拥有多个不同的配置而调用
通过import axios from ‘axios‘ 得到的axios是全局axios，在全局axios上设置配置既是全局配置，
全局axios ==生成==》 axios实例 （在实例上配置，即该实例上的全局配置，简称实例配置）
在面对不同的服务器时，生成对应的实例
生成方法
const instancel = axios.create({内部写入的配置即为实例配置})
instancel拥有和axios相同的方法，在创造该实例配置时候写入的配置为该实例全局共享
instancel({ url:‘...‘ }).then(res=>{...}) //实例申请方法
6.axios注意事项
思路：axios仅引用一次，在requrst.js中，该文件中仅创建axios实例并引导出，由其他文件（home.js）来用不同实例来写成对应的申请函数，最后由其他vue文件进行引用这些函数进行申请
axios → requrst.js（创建不同实例并返回，baseURL放在其中）→home.js（接受实例，并创建对应的申请函数）→ vue文件（引用home.js或对应的函数，调用并获得申请的值）
为什么要这样做，因为是第三方程序，为防止不再更新或者大面积修改，这样做的话，仅修改的文件只有requrst.js，其余文件的输入输出由自己手写，保证功能正常即可正常运行
以下为详细代码
requrst.js
import axios from ‘axios‘;
export function request(config){
const instance = axios.create({
baseURL:"...",
// baseURL:"...",
timeout:0000
});
// 发送真正的网络请求
return instance(config);
}
home.js
import { request } from ‘./request.js‘
export function getHomeMultidata() {
return request({ url: ‘/home/multidata‘ })
}
export function getHomeGoods(type, page) {
return request({ url: ‘/home/data‘, params: { type, page } })
}
vue文件
<script>
import { getHomeMultidata } from "@network/home.js"; //引用
mounted(){
getHomeMultidata().then(res => { //执行
this.banners = res.data.banner.list;
this.recommends = res.data.recommend.list;
});
}
</script>
6.拦截器
待更新
原文：https://www.cnblogs.com/zhenyjsf/p/12241977.html