axios学习笔记（二）

axios方法深入

目录

一、创建axios实例二、实例的相关配置三、常用参数配置具体使用方法四、拦截器（interceptors）五、错误处理六、取消请求

一、创建axios实例

为什么要创建axios实例？ 后端接口地址有多个，并且超时时常不一样，有了axios实例，可以用实例去请求

export default { created() { let instance = axios.create({ baseURL: 'http://localhost:8080', //请求的域名，基本地址 timeout: 1000, //超时时常，超时时常是指在发起http请求的时候，如果服务端长时间没有返回数据，接口就会报401 }) instance.get('/data.json').then((res) => { console.log(res) }) }, }

注意：baseURL和timeout是基本的参数

二、实例的相关配置

常用配置 （1）baseURL //请求的域名，基本地址 （2）timeout //超时时常，超时时常是指在发起http请求的时候，如果 服务端长时间没有返回数据，接口就会报401 （3） url //请求路径 （4） method: //请求方法 （5） headers: //请求头 （6）params: //请求参数拼接在url上 （7）data: //请求参数放在请求体上

<script> import axios from 'axios' export default { created() { let instance = axios.create({ baseURL: 'http://localhost:8080', //请求的域名，基本地址 timeout: 1000, //超时时常，超时时常是指在发起http请求的时候，如果服务端长时间没有返回数据，接口就会报401 url: '/data.json', //请求路径 method: 'get', //请求方法 headers: { //请求头 }, params:{}, //请求参数拼接在url上 data:{} //请求参数放在请求体上 }) axios.get('/data.json') //这个路径是相对路径，前面还有baseURL }, } </script>

三、常用参数配置具体使用方法

实例的相关配置有三种，分别是axios全局配置、axios实例配置、axios请求配置 注意 （1）axios全局配置（一般配timeout和baseURL就可以），实际开发中全局配置用的比较少 （2）优先级：axios请求配置>axios实例配置>axios全局配置

<script> import axios from 'axios' export default { created() { let instance = axios.create({ baseURL: 'http://localhost:8080', //请求的域名，基本地址 timeout: 1000, //超时时常，超时时常是指在发起http请求的时候，如果服务端长时间没有返回数据，接口就会报401 url: '/data.json', //请求路径 method: 'get', //请求方法 headers: { //请求头 }, params: {}, //请求参数拼接在url上 data: {}, //请求参数放在请求体上 }) //全局配置 axios.defaults.timeout = 1000 axios.defaults.baseURL = 'http://localhost:8080' //axios实例配置 let instance=axios.create() instance.defaults.timeout=3000 //如果已经创建了实例，可以通过default的方式来进行修改 //axios请求配置 instance.get('/data.json',{ timeout:5000 //修改配置 }) }, } </script>

假设在实际开发中,有两个请求接口： http://localhost:9090 http://localhost:9091

<script> import axios from 'axios' export default { created() { //实际开发 //有两个请求接口： //http://localhost:9090 //http://localhost:9091 let instance = axios.create({ baseURL: 'http://localhost:9090', timeout: 1000, }) let instance1 = axios.create({ baseURL: 'http://localhost:9091', timeout: 3000, }) instance .get('/orderList', { params: {}, }) .then((res) => { console.log(res) }) //这里用到了baseURL,method,params,timeout,url instance1.get('/detail', { timeout: 5000, //重新设置timeout //这里用到了method,baseURL,url,timeout:5000 }).then((res) => { console.log(res) }) }, } </script>

四、拦截器（interceptors）

拦截器作用：在请求或响应被处理前拦截他们 拦截器分为两种：请求拦截器和响应拦截器

<script> import axios from 'axios' export default { created() { //请求拦截器 axios.interceptors.request.use( (config) => { //在请求前做些什么 return config }, (err) => { //在请求错误的时候做些什么 } ) //use有两个参数，一个请求前的一个请求后的 //响应拦截器 axios.interceptors.response.use( (res) => { //请求成功对响应数据做处理 return res }, (err) => { //响应错误做些什么 return Promise.reject(err) } ) }, } </script>

五、错误处理

错误处理（catch）：请求错误进行的处理 [请求成功就是then]

在实际开发中，一般添加统一错误处理

六、取消请求

什么情况下可能用到取消请求？ 比如商城系统涉及到查询 ，这个查询可能请求时间比较长，可能3-5秒，如果3-5秒还没查询到的话，用户不想查询了，这种情况下会用到取消请求