2021-06-26 axios基础用法

axios

基于promise用于浏览器和node.js的http客户端

支持浏览器和node.js

支持promise

能拦截请求和响应

自动转换JSON数据

能转换请求和响应数据

axios基础用法

# 1. 发送get 请求

axios.get('http://localhost:3000/adata').then(function(ret){

      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面

      // 注意data属性是固定的用法，用于获取后台的实际数据

      // console.log(ret.data)

      console.log(ret)

    })

# 2.  get 请求传递参数

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

axios.get('http://localhost:3000/axios?id=123').then(function(ret){

      console.log(ret.data)

    })

    # 2.2  restful 形式传递参数

    axios.get('http://localhost:3000/axios/123').then(function(ret){

      console.log(ret.data)

    })

# 2.3  通过params  形式传递参数

    axios.get('http://localhost:3000/axios', {

      params: {

        id: 789

      }

    }).then(function(ret){

      console.log(ret.data)

    })

#3 axios delete 请求传参    传参的形式和 get 请求一样

    axios.delete('http://localhost:3000/axios', {

      params: {

        id: 111

      }

    }).then(function(ret){

      console.log(ret.data)

    })

# 4  axios 的 post 请求

    # 4.1  通过选项传递参数

    axios.post('http://localhost:3000/axios', {

      uname: 'lisi',

      pwd: 123

    }).then(function(ret){

      console.log(ret.data)

    })

# 4.2  通过 URLSearchParams  传递参数

    var params = new URLSearchParams();

    params.append('uname', 'zhangsan');

    params.append('pwd', '111');

    axios.post('http://localhost:3000/axios', params).then(function(ret){

      console.log(ret.data)

    })

#5  axios put 请求传参  和 post 请求一样

    axios.put('http://localhost:3000/axios/123', {

      uname: 'lisi',

      pwd: 123

    }).then(function(ret){

      console.log(ret.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 拦截器

# 1. 请求拦截器

    axios.interceptors.request.use(function(config) {

console.log(config.url)

# 1.1  任何请求都会经过这一步   在发送请求之前做些什么  

config.headers.mytoken='nihao';

# 1.2  这里一定要return   否则配置不成功  

returnconfig;

},function(err){

#1.3 对请求错误做点什么    

console.log(err)

   })

    #2. 响应拦截器

axios.interceptors.response.use(function(res) {

#2.1  在接收响应做些什么  

vardata=res.data;

returndata;

},function(err){

#2.2 对响应错误做点什么  

console.log(err)

   })

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)

    })