浅谈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


相关文章
|
JavaScript
VUE:使用async和await实现axios同步请求
VUE:使用async和await实现axios同步请求
|
5月前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
183 1
|
5月前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
|
前端开发 JavaScript
axios拦截器封装:await遇上reject时catch的优雅处理方式
前端项目中使用 axios 请求接口,基于 axios 二次封装了一些业务逻辑,一般我们会在请求和响应拦截器里添加自己项目相关的业务逻辑
745 1
|
前端开发
axios,async,promise,await的简单理解与使用
一.Promise解决的是将“异步过程“变成“同步过程” 1.Promise 是一个构造函数 ⚫ 我们可以创建 Promise 的实例 const p = new Promise() ⚫ new 出来的 Promise 实例对象,代表一个异步操作 2. Promise.prototype 上包含一个 .then() 方法 注:prototype表示该函数的原型,也表示一个类的成员的集合。 在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。 2、在new实例化后,其成员被实例化,实例对象方可调用。
376 0
axios,async,promise,await的简单理解与使用
|
JSON API 数据格式
|
2月前
|
资源调度 JavaScript
|
4月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
2月前
|
缓存 JavaScript 搜索推荐