axios

基本axios请求

(1)get
       axios.get('http://xxxxxxxxx', {
         params: {
           id: 789
         }
       }).then(function(ret){
         console.log(ret.data)
       })
(2)delete
       axios delete    请求传参
       axios.delete('http://xxxxxxxxx', {
         params: {
        id: 111
        }
       }).then(function(ret){
         console.log(ret.data)
       })
(3)post
     var params = new URLSearchParams();
     params.append('uname', 'zhangsan');
     params.append('pwd', '111');
     axios.post('http://xxxxxxxxx', params).then(function(ret){
      console.log(ret.data)
      })
(4)put
    axios.put('http://xxxxxxxxx', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

 

接口支持:键值对形式的参数(application/x-www-form-urlencoded)

var params = new URLSearchParams();

params.append("pagenum",1);

params.append("pagesize",10);



axios.put("请求的url地址",params).then(ret => {})

 

 

响应结果与全局配置

    /*
      axios 响应结果与全局配置
    */
    // axios.get('http://localhost:3000/axios-json').then(function(ret){
    //   console.log(ret.data.uname)
    // })
　　axios.defaults.timeout = 3000;  // 超时时间
    // 配置请求的基准URL地址
    axios.defaults.baseURL = 'http://localhost:3000/';
    // 配置请求头信息
    axios.defaults.headers['mytoken'] = 'hello';     //请求头

axios.get('axios-json').then(function(ret){ console.log(ret.data.uname) })

 

拦截器

    /*
      axios拦截器
    */
    axios.interceptors.request.use(function(config) {
　　　　//在这里对返回的数据进行处理
      console.log(config.url)
      config.headers.mytoken = 'nihao';
      return config;
    }, function(err){
　　　　//处理响应的错误信息
      console.log(err)
    })

    axios.interceptors.response.use(function(res) {
      // console.log(res)
      var data = res.data;
      return data;
    }, function(err){
      console.log(err)
    })
    axios.get('http://localhost:3000/adata').then(function(data){
      console.log(data)
    })

 

async函数基本用法  (await可以把异步变同步  如处理回调地狱问题)

 　　async 关键字是一个函数 修饰符 ,async这个关键字只能写在函数的面前.

　　 当一个函数被添加了aysnc修饰符,函数立刻会被变成异步函数.

    /*
      async/await 处理异步操作：
      async函数返回一个Promise实例对象
      await后面可以直接跟一个 Promise实例对象
　　　 await关键字的作用就是等到 异步操作的结果回来之后,再继续往下执行.
    */
    axios.defaults.baseURL = 'http:localhost:3000';
    // axios.get('adata').then(function(ret){
    //   console.log(ret.data)
    // })

     async function queryData() {
       var ret = await axios.get('adata');
      // console.log(ret.data)
      return ret.data;
    }

    async function queryData() {
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    queryData().then(function(data){
      console.log(data)
    })

 

 

async/await处理多个异步任务

    axios.defaults.baseURL = 'http://127.0.0.1:3000';

    (async function queryData() {

      var info = await axios.get('/books');
      // var ret = await axios.get('async2?info=' + info.data);
      console.log( info);
    })()