axios

妖狐艹你老母 2021-09-07 06:12 442阅读 0赞

### axios ###

*  一、什么是axios
 *  二、写法
 *  三、axios常用的API
 *   *  1.get和delete方式传递参数
     *  2.post和put请求传参
 *  四、axios响应结果
 *  五、axios的全局配置
 *  六、axios拦截器
 *   *  1.请求拦截器
     *  2.响应拦截器
 *  7.async和await配合axios

# 一、什么是axios #

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

# 二、写法 #

# 三、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表示必须等这个请求结束之后才能执行后面的代码。把异步函数当作同步函数来写了。