axios

一、什么是axios

基于Promise用于浏览器和node.js的http客户端
1.支持Promise
2.支持浏览器和node.js
3.能拦截请求和响应
4.自动转换json数据

二、写法

<script type='text/javascript' src='axios.js'>
//引入之后，就多了个全局变量axios
axios.get('地址').then(res=>{
  //res.data就是返回的数据
  /
})

三、axios常用的API

1.get和delete方式传递参数

axios.get/delete('地址？name=fei&age=18').then(res=>{
  //res.data就是返回的数据
})
axios.get/delete('地址/123).then(res=>{
  //res.data就是返回的数据
  //restful风格的传参也是支持的
})

axios.get/delete('地址',{
     params:{
      id:123
}
}).then(res=>{
  //res.data就是返回的数据
})
//推荐这种风格，params是固定属性，表示发出的参数。

2.post和put请求传参

axios.post/put('地址',{
      id:123

}).then(res=>{
  //res.data就是返回的数据
})
//post方法第二个参数，就是发出的参数。默认传过去的是json格式的数据。

//通过URLSearchParams传递参数
const params =  new URLSearchParams();
params.append('键名','值')
params.append('键名2','值2')
axios.post/put('地址',params).then(res=>{
    //res就是返回的参数
})


//推荐是使用第一种

四、axios响应结果

axios会把结果做一个包装
1.data：数据
2.headers：响应头部
3.status：状态码
4.status Text:响应状态信息

五、axios的全局配置

axios.default.timeout = 3000;//请求等待时间3000ms，超过这个等待时间就会报错
axios.default.baseURL = '请求地址';//默认地址,后边发请求的时候只要发路径就行。
axios.default.headers['mytoken'] = '这个字段的信息';//设置请求头,表示用户登录成功的一把钥匙。后台需要来接收这个请求头，字段也是mytoken，可以接收多个请求头
axios.get('user/login').then(res=>{
   //设置了baseURL 后，请求只需要写后面的路径即可， 会默认的把baseURL 加在路径前面
})

六、axios拦截器

在请求和响应的时候处理一下。

1.请求拦截器

请求的时候拦截请求，处理请求

axios.interceptors.request.use(function(config){
      //在请求发出之前做一些信息设置

     config.header.mytoken = '头部信息'
      //这里设置请求头的mytoken和上面全局配置一样，但这里可以
      //根据config.url来判断请求的路径，做出对应的头部措施。
      //固定的 头部信息可以放在全局配置里面


      //config一定要return出去
      return config
 
}),function(err){
   //处理响应的错误信息
})
axios.get('地址').then(res=>{
      //这时候就会多一个头部信息mytoken 字段
})

2.响应拦截器

在数据返回时，先做处理，再返回

axios.interceptors.response.use(function(res){
      //在请求发出之前做一些信息设置
     //只关心实际的数据res.data，不关心res这个对象，可以在这里处理res这个对象。只保留res.data即可。这样下面get请求的的res就是res.data了。
     //也能处理这个数据
      //这里的res和下面get的res是同一个数据。
      return res
 
}),function(err){
   //处理响应的错误信息
})
axios.get('地址').then(res=>{
      //这时候就会多一个头部信息mytoken 字段
})

7.async和await配合axios

async function fn(){
  const ret  = await axios.get('路径')
  return  ret

}
//async异步函数调用后默认返回以promise对象，可以使用.then()
//要是async异步函数显示的return一个值，.then(res=>{})里的res就是那个返回的值，一般都是将接口的返回值传出去。
fn.then(res=>{
   console.log(res)
   //res是return 返回的值ret
})


//不用async和await写法是
axios.get('路径').then(res=>{})

//使用之后可以把异步写法当作同步写法来写

async和await多是用来处理多个请求，并且请求直接有顺序

async function fn1(){
  let res1 = await axios.get('地址1')
  let res2 = await axios.get('地址2')
   let res3 = await axios.get('地址3')
}

这样就能按顺序发生请求，并且可以在后面的请求中使用前面的请求。await表示必须等这个请求结束之后才能执行后面的代码。把异步函数当作同步函数来写了。