axios请求方法

主要有get，post，put，patch，delete

get获取数据post提交数据（表单提交+文件上传）put更新数据（将所有数据均推放到服务端）patch更新数据（只将修改的数据推送到后端）delete删除数据

get方法

写法

调用型

axios.get(/data.json).then((res)=>{ console.log(res) })

axios()型

axios({ method:get, url:/data.json }).then((res)=>{ console.log(res) })

params

如果我们需要加载 : :8080/data.json?id=12,应该如何去获取呢？

调用型

axios.get(/data.json,{ params:{ id:12 } }).then((res)=>{ console.log(res) })

axios()方法型

axios({ method:get, url:/data.json, params:{ id:12 } }).then((res)=>{ console.log(res) })

post方法

写法

调用型

axios.post(/post,{},config)

post方法有三个参数，分别是url、数据、config。config参数暂时不讨论。

一般上传的数据分两种

form-data 表单提交（图片上传、文件上传）application/json以上两种数据，都可以在请求发起后，进入浏览器network查看请求头中的content-type进行查看

假设我们现在要上传一个数据：

let data = { id:12 }

那么我们可以直接将其传入：

axios.post(/post,data).then((res)=>{ console.log(res) })

1234

axios()方法型

axios({ method:post, url:/post, data:data }).then(...)

123456

两种数据的小细节

当我们上传的是一个一般的let data = { id:12 }数据时，Network的请求头里会显示为：application/json；charset=UTF-8

当我们上传的是：

let data = {id:12} let formData = new FormData() for(let key in data){ formData.append(key,data[key]) }

123456

这里将data转格式了，格式变为formdata形式。

那么Network的请求头里会显示为：multipart/form-data; boundary=----WebKitFormBoundarywWFnSlPye1ZF8CSw

put方法和patch方法

形式与post方法大体相同，Network显示仅Request Method不同。

delete方法

写法

url删除法

//直接从url里面删除 axios.delete(/data.json,{ params:{ id:12 } }).then((res)=>{ console.log(res) })

123456789

从url删除，Network请求头最后面会显示为：Query String Parameters

请求体删除法

axios.delete(/data.json,{ data:{ id:12 } }).then((res)=>{ console.log(res) })

12345678

从请求体里删除，Network请求头最后面会显示为：Request Payload

两种方法的删除方式是不同的，具体使用需要和后端沟通。

并发请求

简介

同时进行多个请求，并统一处理返回值。

案例：假设有一个聊天工具，同时有你的聊天记录和个人信息。此时需要调用两个接口去请求数据。此时需要统一处理他们的返回值。

axios提供的方法：all、spread

axios.all方法接受一个数组作为参数，数组中的每个元素都是一个请求，返回一个promise对象，当数组中所有请求均已完成时，执行then方法。 在then方法中执行了 axios.spread 方法。该方法是接收一个函数作为参数，返回一个新的函数。接收的参数函数的参数是axios.all方法中每个请求返回的响应。

function getUserAccount() { return axios.get(/user/12345); } function getUserPermissions() { return axios.get(/user/12345/permissions); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread((acct, perms) => { // 两个请求都完成后,acct是getUserAccount的返回值，同理，perms是 getUserPermissions的返回值 }));

12345678910111213

axios实例简介

为什么要用实例？

当我们需要用到不同的后端域名，直接调用axios.get并不太方便。我们可以用创建实例的方式去调用，不同的域名用不同的实例一一对应。

表现形式

created() { let instance = axios.create({ baseURL::8080,//基本请求路径 timeout:1000,//超时设定 }) instance.get(/data.json).then(res=>{ console.log(res) }) }

12345678910

基本配置方法

baseURL::8080,//请求的域名、基本地址 timeout:1000,//请求超时时长（ms） url:/data.json,//请求路径 method:get，post，put，patch,delete,//请求方法 headers:{ token://代表当前登陆人的身份信息 },//设置请求头 params:{},//将请求参数拼接在url上，是一个对象 data:{}//将请求参数放在请求体里，是一个对象

其中，params和data表现形式为对象。

使用场景通常是发起请求时，顺带传送参数：

//以get请求为例，get有两个配置，分别是相对路径和config axios.get(/data.json,{ params:{ //参数 } })

参数配置方法

1.全局配置

axios.defaults.基本配置方法（baseurl等） 如： axios.defaults.timeout = 1000 //全局配置请求时长1s

2.实例配置

let instance = axios.create( //基本配置方法 )

如果设置了全局的配置方法，而实例配置中没有设置相应的方法，则延用全局的方法，否则，以实例中的方法为主。

3.axios请求配置

视具体情况而定，如调用某个路径的文件巨大，我们可以单独对其请求时长进行设置：

instance.get(/data.json,{ timeout:5000 })

总结

优先级：请求配置 > 实例配置 > 全局配置

拦截器

在发起请求前做一些处理，再发起请求后再做一些处理。

分为请求拦截器和响应拦截器

请求拦截器

axios.interceptors.request.use( config=>{ //在发送请求前做些什么 return config }, err=>{ // 在请求错误的时候做些什么（此处错误，请求没有到后端） return Promise.reject(err)//这里返回一个promise对象 } )

响应拦截器

axios.interceptors.responce.use( res=>{ //请求成功对响应数据进行处理 return res },err=>{ //响应错误做些什么（此处错误，到达后端后返回） return Promise.reject(err) } )

两者都在响应错误后进行了promise对象的返回，具体的作用是什么呢？

axios.get().then().catch(err=>{})

这一段代码是我们平时发送get请求时的标准形态，then会执行请求成功后的操作，catch用来捕获错误。

我们前面拦截响应后，无论是请求还是响应的拦截器，他们的err返回的promise都会进入catch中。

取消拦截器（了解即可）

let inerceptors = axios.interceptors.request.use (config=>{ config.header = { auth:true } return config }) axios.inerceptors.request.eject(interceptors) //用axios全局去调用interceptors，这样就取消拦截了。。。

举个栗子

通过拦截器控制登陆状态

// 登陆状态,有token let request = axios.create({}) request.interceptors.request.use (config => { config.headers.token = return config }) // 非登陆状态，无token let request2 = axios.create({})

有token的可以访问更多，get更多的数据，无token则不行。类似于评论需要登陆

错误处理

表现形式

//首先设置拦截器 axios.interceptors.request.use( config =>{ return config },err =>{ return Promise.reject(err) } ) axios.interceptors.response.use( res =>{ return res },err =>{ return Promise.reject(err) } ) //错误的获取 axios.get(/data.json).then(res=>{ console.log(res) }).catch(err =>{ console.log(err) //所有错误处理都会进入此处 })

具体的实践过程中，我们需要创建一个统一的错误处理，将所有的错误类型都放在拦截其中，方便我们后面调用接口时使用。

栗子

//创建一个请求实例 let instance = axios.create({}) //为请求实例添加请求拦截器 instance.interceptors.request.use( config =>{ return config },err =>{ //请求错误 一般http状态码以4开头，常见：401超时，404 not found 多为前端浏览器错误 return Promise.reject(err) } ) instance.interceptors.response.use( res=>{ return res },err =>{ //响应错误,一般http状态码以5开头，500系统错误，502系统重启等，偏向于服务端返回的报错 return Promise.reject(err) } ) ​ //使用 instance.get(data).then(res=>{ console.log(res) }).catch(err =>{ console.log(err) })

取消请求

用于取消正在进行的http请求，比较少用到，就不做介绍了