axios的知识点

一、axios框架的使用

学习axios过程中记录的一些知识点

拓展：httpbin.org 专门用于测试网络请求的网站

①安装

通过npm I axios –save 安装

接着在main.js导入

Import axios from “axios”

接着直接使用就好了

二、axios的使用

axios({   //axios默认是get请求,如果想修改请求方式，可以在method中设置

  url:"http://httpbin.org/ip",

  method:'get',   //用于设置请求方式

  params:{   //params是专门针对get请求的参数拼接，里面的参数会自动拼接到url的?后面

​    //例：type:'pop',

​    //    page:1

  }

}).then(res => {    //axios中内部支持promise，所以当请求成功时可以直接通过.then来获取数据

  console.log(res);

})

三、axios发送并发请求

axios发送并发请求（同时发送两个请求）

axios.all([   //通过axios.all([])方法发送并行请求，方法的参数为一个数组，数组里是多个axios请求

  axios({

​    url:"http://httpbin.org/ip"

  }),

  axios({

​    url:"http://httpbin.org/headers"

  })

]).then(result=>{  //请求成功之后通过.then返回结果，返回的结果是个数组，每次请求的结果依次存放在数组中

  console.log(result);

  console.log(result[0]);

  console.log(result[1]);

 

  //axios还提供一个方法可以直接展开数组

  //.then(axios.spread((参数1，参数2)=>{ 对数据的操作}))

  //这里的参数1参数2便是每次请求的数据了

})

四、axios的全局配置（开发时别用全局配置）

当我们想要设置一些全局配置时，可以通过axios.defaluts进行设置

axios的全局配置

axios.defaults.baseURL="http://httpbin.org"

axios.defaults.timeout = 5000

配置之后的代码

axios.all([ 

  axios({

​    [url:"/ip](url:%22/ip)"   //只需写后面的路径就可以了

  }),

  axios({

​    url:"/headers"

  })

]).then(result=>{  

  console.log(result);

  console.log(result[0]);

  console.log(result[1]); 

})

五、axios创建实例以及axios的封装（重要）

将和axios网络请求有关的代码都封装成一个单独的模块，在src中创建一个network文件夹，在里面创建一个request.js，用来放我们的网络请求的代码

Request.js：

import axios from "axios"  //在封装的文件中导入axios



export function request(config){    //导出一个方法

 const instance = axios.create({   //创建一个axios实例，使用axios.create({})创建

​    baseURL:"http://httpbin.org",

​    timeout:5000

 })

 

 //这里发送网络请求

 return instance(config)   //直接return我们的instance实例，因为instance本身返回一个promise，所以我们这里return的本身就是一个promise，当请求成功的时候，函数会执行resolve，失败时会执行reject,所以我们可以直接在调用的地方直接.then，

}

//封装的好处是当第三方框架失效时，或者要换第三方框架时，只需要修改这一个文件就好了

使用时只需要导入这个模块就好了

import {request} from “./network/request” //导入我们封装的网络请求方法

request({   //给方法传入config

 url:"/ip",

}).then(res=>{    //直接在这里使用.then，因为request本身return的就是一个promise，当成功时会执行.then，失败时执行.catch

 console.log(res);

}).catch(res=>{

 console.log(res);

})

六、axios的拦截器

有时候，我们希望在请求的过程中进行一个拦截，然后对请求信息进行一些操作，或者在请求过程中加入一些动画，然后在响应成功时移除动画，这种时候我们就可以使用拦截器

axios的拦截器

  //axios的拦截器可以通过 实例名（或者axios 全局）.interceptors.request.use()这种格式使用

  //四种拦截器：请求成功拦截、请求失败拦截、响应成功拦截、响应失败拦截

 

  instance.interceptors.request.use(config=>{   //请求类型的拦截通过request.use()来拦截，里面有两个参数，两个参数都是方法，

​                                                //第一个参数config(),表示请求的配置信息

​    console.log(config);     //这里是对配置信息的操作

​    return config       //操作完之后一定要把参数返回，否则其他地方就获取不到了            

  },err=>{     //第二个参数为请求失败的拦截，err()表示错误信息

​    console.log(err);

  })

 

  instance.interceptors.response.use(result=>{  //响应类型的拦截通过response.use()来拦截，同样的，有两个参数,

​                                              //都是方法，第一个参数是result()，参数中放的是服务器返回的数据

​    console.log(result);    //对返回的数据进行操作

​    return result.data     //同样的，操作完之后一定要把参数返回，否则其他地方就获取不到了，这里我们一般只返回data就行了

  },err=>{               //第二个参数为请求失败的拦截，err()表示错误信息

​    console.log(err);

  })