axios请求方法
主要有get，post，put，patch，delete
-
get
获取数据
-
post
提交数据（表单提交+文件上传）
-
put
更新数据（将所有数据均推放到服务端）
-
patch
更新数据（只将修改的数据推送到后端）
-
delete
删除数据
get方法
写法
调用型
1 axios.get('/data.json').then((res)=>{ 2 console.log(res) 3 }) 4
axios()型
1axios({ 2 method:'get', 3 url:'/data.json' 4}).then((res)=>{ 5 console.log(res) 6}) 7
params
如果我们需要加载 : http://localhost:8080/data.json?id=12,应该如何去获取呢？
调用型
1axios.get('/data.json',{ 2 params:{ 3 id:12 4 } 5 }).then((res)=>{ 6 console.log(res) 7 }) 8
axios()方法型
1axios({ 2 method:'get', 3 url:'/data.json', 4 params:{ 5 id:12 6 } 7}).then((res)=>{ 8 console.log(res) 9}) 10
post方法
写法
调用型
1axios.post('/post',{},config) 2
post方法有三个参数，分别是url、数据、config。config参数暂时不讨论。
一般上传的数据分两种
- form-data 表单提交（图片上传、文件上传）
- application/json
- 以上两种数据，都可以在请求发起后，进入浏览器network查看请求头中的content-type进行查看
假设我们现在要上传一个数据：
let data = { id:12 }
那么我们可以直接将其传入：
1axios.post('/post',data).then((res)=>{ 2 console.log(res) 3}) 4
axios()方法型
1axios({ 2 method:'post', 3 url:'/post', 4 data:data 5}).then(...) 6
两种数据的小细节
当我们上传的是一个一般的let data = { id:12 }数据时，Network的请求头里会显示为：application/json；charset=UTF-8
当我们上传的是：
1let data = {id:12} 2let formData = new FormData() 3for(let key in data){ 4 formData.append(key,data[key]) 5 } 6
这里将data转格式了，格式变为formdata形式。
那么Network的请求头里会显示为：multipart/form-data; boundary=----WebKitFormBoundarywWFnSlPye1ZF8CSw
put方法和patch方法
形式与post方法大体相同，Network显示仅Request Method不同。
delete方法
写法
url删除法
1//直接从url里面删除 2axios.delete('/data.json',{ 3 params:{ 4 id:12 5 } 6 }).then((res)=>{ 7 console.log(res) 8 }) 9
从url删除，Network请求头最后面会显示为：Query String Parameters
请求体删除法
1axios.delete('/data.json',{ 2 data:{ 3 id:12 4 } 5 }).then((res)=>{ 6 console.log(res) 7 }) 8
从请求体里删除，Network请求头最后面会显示为：Request Payload
两种方法的删除方式是不同的，具体使用需要和后端沟通。
并发请求
简介
同时进行多个请求，并统一处理返回值。
案例：假设有一个聊天工具，同时有你的聊天记录和个人信息。此时需要调用两个接口去请求数据。此时需要统一处理他们的返回值。
axios提供的方法：all、spread
axios.all方法接受一个数组作为参数，数组中的每个元素都是一个请求，返回一个promise对象，当数组中所有请求均已完成时，执行then方法。 在then方法中执行了 axios.spread 方法。该方法是接收一个函数作为参数，返回一个新的函数。接收的参数函数的参数是axios.all方法中每个请求返回的响应。
1function getUserAccount() { 2 return axios.get('/user/12345'); 3} 4 5function getUserPermissions() { 6 return axios.get('/user/12345/permissions'); 7} 8 9axios.all([getUserAccount(), getUserPermissions()]) 10 .then(axios.spread((acct, perms) => { 11 // 两个请求都完成后,acct是getUserAccount的返回值，同理，perms是 getUserPermissions的返回值 12 })); 13
axios实例简介
为什么要用实例？
当我们需要用到不同的后端域名，直接调用axios.get并不太方便。我们可以用创建实例的方式去调用，不同的域名用不同的实例一一对应。
表现形式
1 created() { 2 let instance = axios.create({ 3 baseURL:'http://localhost:8080',//基本请求路径 4 timeout:1000,//超时设定 5 }) 6 instance.get('/data.json').then(res=>{ 7 console.log(res) 8 }) 9 } 10
基本配置方法
1 baseURL:'http://localhost:8080',//请求的域名、基本地址 2 timeout:1000,//请求超时时长（ms） 3 url:'/data.json',//请求路径 4 method:'get，post，put，patch,delete',//请求方法 5 headers:{ 6 token:''//代表当前登陆人的身份信息 7 },//设置请求头 8 params:{},//将请求参数拼接在url上，是一个对象 9 data:{}//将请求参数放在请求体里，是一个对象 10
其中，params和data表现形式为对象。
使用场景通常是发起请求时，顺带传送参数：
1 //以get请求为例，get有两个配置，分别是相对路径和config 2 axios.get('/data.json',{ 3 params:{ 4 //参数 5 } 6 }) 7
参数配置方法
1.全局配置
1 axios.defaults.基本配置方法（baseurl等） 2 如： 3 axios.defaults.timeout = 1000 //全局配置请求时长1s 4
2.实例配置
1 let instance = axios.create( 2 //基本配置方法 3 ) 4
如果设置了全局的配置方法，而实例配置中没有设置相应的方法，则延用全局的方法，否则，以实例中的方法为主。
3.axios请求配置
视具体情况而定，如调用某个路径的文件巨大，我们可以单独对其请求时长进行设置：
1 instance.get('/data.json',{ 2 timeout:5000 3 }) 4
总结
优先级：请求配置 > 实例配置 > 全局配置
拦截器
在发起请求前做一些处理，再发起请求后再做一些处理。
分为请求拦截器和响应拦截器
请求拦截器
1 axios.interceptors.request.use( 2 config=>{ 3 //在发送请求前做些什么 4 return config 5 }, 6 err=>{ 7 // 在请求错误的时候做些什么（此处错误，请求没有到后端） 8 return Promise.reject(err)//这里返回一个promise对象 9 } 10 ) 11
响应拦截器
1 axios.interceptors.responce.use( 2 res=>{ 3 //请求成功对响应数据进行处理 4 return res 5 },err=>{ 6 //响应错误做些什么（此处错误，到达后端后返回） 7 return Promise.reject(err) 8 } 9 ) 10
两者都在响应错误后进行了promise对象的返回，具体的作用是什么呢？
1 axios.get().then().catch(err=>{}) 2
这一段代码是我们平时发送get请求时的标准形态，then会执行请求成功后的操作，catch用来捕获错误。
我们前面拦截响应后，无论是请求还是响应的拦截器，他们的err返回的promise都会进入catch中。
取消拦截器（了解即可）
1 let inerceptors = axios.interceptors.request.use 2 (config=>{ 3 config.header = { 4 auth:true 5 } 6 return config 7 }) 8 axios.inerceptors.request.eject(interceptors) //用axios全局去调用interceptors，这样就取消拦截了。。。 9
举个栗子
通过拦截器控制登陆状态
1 // 登陆状态,有token 2 let request = axios.create({}) 3 request.interceptors.request.use 4 (config => { 5 config.headers.token = '' 6 return config 7 }) 8 // 非登陆状态，无token 9 let request2 = axios.create({}) 10
有token的可以访问更多，get更多的数据，无token则不行。类似于评论需要登陆
错误处理
表现形式
1 //首先设置拦截器 2 axios.interceptors.request.use( 3 config =>{ 4 return config 5 },err =>{ 6 return Promise.reject(err) 7 } 8 ) 9 axios.interceptors.response.use( 10 res =>{ 11 return res 12 },err =>{ 13 return Promise.reject(err) 14 } 15 ) 16 17 //错误的获取 18 axios.get('/data.json').then(res=>{ 19 console.log(res) 20 }).catch(err =>{ 21 console.log(err) //所有错误处理都会进入此处 22 }) 23
具体的实践过程中，我们需要创建一个统一的错误处理，将所有的错误类型都放在拦截其中，方便我们后面调用接口时使用。
栗子
1 //创建一个请求实例 2 let instance = axios.create({}) 3 //为请求实例添加请求拦截器 4 instance.interceptors.request.use( 5 config =>{ 6 return config 7 },err =>{ 8 //请求错误 一般http状态码以4开头，常见：401超时，404 not found 多为前端浏览器错误 9 return Promise.reject(err) 10 } 11 ) 12 instance.interceptors.response.use( 13 res=>{ 14 return res 15 },err =>{ 16 //响应错误,一般http状态码以5开头，500系统错误，502系统重启等，偏向于服务端返回的报错 17 return Promise.reject(err) 18 } 19 ) 20 21 //使用 22 instance.get('data').then(res=>{ 23 console.log(res) 24 }).catch(err =>{ 25 console.log(err) 26 }) 27
取消请求
用于取消正在进行的http请求，比较少用到，就不做介绍了