浅谈Axios和(async/await)

简介: 浅谈Axios和(async/await)

Axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中


特点

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF


GET 方法

通过 params 设置参数,实际开发中常用


axios.get('/接口名', {
    params: {
      参数名: 参数
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST请求

通过 data 设置参数,data可以省略


axios.post('/接口名', {
    参数名: 参数
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios全局配置

//配置公共的请求头
axios.defaults.baseURL = 'https://你设置的ip地址'
// 配置超时时间
axios.defaults.timeout = 3000;
// 配置公共请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//配置公共的post的Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

async/await

async/await 是ES7提出的基于Promise的解决异步的最终方案


async是一个加在函数前的修饰符,被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then,返回值就是then方法传入的函数。

await 修饰的如果是Promise对象:可以获取Promise中返回的内容(resolve或reject的参数),且取到值后语句才会往下执行;如果不是Promise对象:把这个非promise的东西当做await表达式的结果。


用法

// async基础语法
async function fun0(){
    console.log(1);
    return 1;
}
fun0().then(val=>{
    console.log(val) // 1,1
})
async function fun1(){
    console.log('Promise');
    return new Promise(function(resolve,reject){
        resolve('Promise')
    })
}
fun1().then(val => {
    console.log(val); // Promise Promise
})

await 也是一个修饰符,只能放在async定义的函数内。可以理解为等待。await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个语法错误。


function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
async function helloAsync() {
  var x = await testAwait ("hello");
  console.log(x); 
}
helloAsync ();//2s后输出hello
相关文章
|
24天前
|
前端开发 JavaScript
Promise、async和await
Promise、async和await
17 0
|
24天前
|
前端开发 JavaScript
什么是 async、await ?
什么是 async、await ?
|
7月前
|
JSON 前端开发 JavaScript
async/await的应用
async/await的应用
35 0
|
9月前
|
前端开发 JavaScript
|
24天前
|
前端开发 JavaScript
async/await
async/await
18 0
|
2天前
|
前端开发
async、await
async、await
|
24天前
|
JSON 前端开发 JavaScript
什么是async和await?
什么是async和await?
14 0
|
JavaScript
VUE:使用async和await实现axios同步请求
VUE:使用async和await实现axios同步请求
|
24天前
|
前端开发 JavaScript
在 Vue 中,Promise 和 async/await 有什么不同?
在 Vue 中,Promise 和 async/await 有什么不同?
23 0
|
24天前
|
前端开发 JavaScript

热门文章

最新文章