axios

axios

参数的传递

get和delete请求参数

• 通过传统的url 以 ? 的形式传递参数

  let obj = { id: "10", name: "xiaohong" }
  let s = "http://127.0.0.1:8080/user"
  let s1 = ""
  for (let key in obj) {
      s1 += `${key}=${obj[key]}&`
  }
  s += "?" + s1.substring(0, s1.length - 1)
  axios.get(s).then(data => {
      console.log(data)
  })
  

• restful 形式传递参数

router.get("/user/:id/:name",(req,res,next)=>{
    res.json(
        req.params
    )
})


axios.get("http://127.0.0.1:8080/user/11/xiaohuang").then(data => {
            console.log(data)
})

• 通过params 形式传递参数

  axios.get("http://127.0.0.1:8080/user",{params:{
      id:"11",
      name:"zhizhenjin"
  }}).then(data => {
      console.log(data)
  })
  

post和put请求传递参数

• 通过选项传递参数

  axios.post("/user/path",{
      sex:"男",
      name:"mengnan",
      avg:18
  }).then(data=>{
      console.log(data)
  })
  

• 通过 URLSearchParams 传递参数

  let params=new URLSearchParams()
  let obj1={
      sex:"男",
      name:"mengnan",
      avg:18
  }
  for(let key in obj1){
      params.append(key,obj1[key])
  }
  axios.post("/user/path1",params).then(data=>{
      console.log(data)
  })
  

axios全局配置

#配置公共的请求头  
axios.defaults.baseURL = 'https://api.example.com'; 
#  配置 超时时间 
axios.defaults.timeout = 2500; 
# 配置公共的请求头 
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 
# 配置公共的 post的Content-Type 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios拦截器

请求拦截器

• 请求拦截器的作用是在请求发送前进行一些操作

  • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

  # 1. 请求拦截器   
  axios.interceptors.request.use(function(config) {       
      console.log(config.url)       
      # 1.1  任何请求都会经过这一步   在发送请求之前做些什么          
      config.headers.mytoken = 'nihao';       
      # 1.2  这里一定要return   否则配置不成功         
      return config;  
      #config中含有与请求相关的参数
  }, function(err){        
      #1.3 对请求错误做点什么           
      console.log(err)     
  }) 
  

响应拦截器

• 响应拦截器的作用是在接收到响应后进行一些操作
  • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

#2. 响应拦截器      
axios.interceptors.response.use(function(res) {       
    #2.1  在接收响应做些什么         
    var data = res.data;
    #2.2 一定需要返回值，不然拦截器不生效
    return data;     
}, function(err){       
    #2.3 对响应错误做点什么         
    console.log(err)     
})

移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

async与await

• async作为一个关键字放到函数前面

  • 任何一个 async 函数都会隐式返回一个 promise

• await 关键字只能在使用 async 定义的函数中使用

  • await后面可以直接跟一个 Promise实例对象
  • await函数不能单独使用

• async/await 让异步代码看起来、表现起来更像同步代码

   # 1.  async 基础用法    
   # 1.1 async作为一个关键字放到函数前面  
   async function queryData() {       
       # 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象       
       var ret = await new Promise(function(resolve, reject){         							setTimeout(function(){           
           		resolve('nihao')         
       		},1000);       
              })       
       // console.log(ret.data)       
       return ret;     }  
  # 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
  queryData().then(function(data){       console.log(data)     }) 
   
   #2.  async    函数处理多个异步函数     
   axios.defaults.baseURL = 'http://localhost:3000'; 
   
      async function queryData() {       
          # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码                 
          var info = await axios.get('async1');       
          #2.2  让异步代码看起来、表现起来更像同步代码       
          var ret = await axios.get('async2?info=' + info.data);       
          return ret.data;     } 
   
      queryData().then(function(data){       console.log(data)     })