前端系列-4 promise与async/await与fetch/axios使用方式

背景：

本文介绍promise使用方式，以及以Promise为基础的async/await用法和fetch/axios使用方式，主要以案例的方式进行。

1.promise

1.1 promise介绍

javascript是单线程执行的，异步编程的本质是事件机制和函数回调。当执行阻塞任务或者进行IO操作时，编程时很容易嵌套多层回调，严重影响可读性和维护性，陷入地狱回调，如下所示:

var addStudent = function (name, callback) {setTimeout(function () {console.log("add " + name + " success");callback();}, 1000);
};
addStudent("student-1", function () {addStudent("student-2", function () {addStudent("student-3", function () {console.log("end");});});
});

执行结果如下所示：

VM153:3 add student-1 success
VM153:3 add student-2 success
VM153:3 add student-3 success
VM153:10 end

promise被用于解决该问题而被引入, 使用Promise的写法:

function addStudentPromise(name) {  return new Promise((resolve) => {  setTimeout(function () {  console.log("add " + name + " success");  resolve();}, 1000);  });  
}  // 使用.then()链来链接异步操作  
addStudentPromise("student-1")  .then(() => addStudentPromise("student-2"))  .then(() => addStudentPromise("student-3"))  .then(() => console.log("end"));

1.2 promise用法

promise有三种状态， pending-进行中、fulfilled-已成功、rejected-已失败; 对应两种状态切换路径： pending-> fulfilled 和 pending-> rejected。需要注意的是Promise在状态切换后不会再发生状态变化。
[1] 创建Promise
以下是一个Promise对象创建的模板:

new Promise((resolve, reject) => {// 代码A
});  

Promise创建时, 会立即执行代码A(一般包括异步逻辑)，此时Promise处于pending状态；当代码A内部的resolve方法被调用后，Promise转为fulfilled状态；当代码A内部的rejected方法被调用后，Promise转为rejected状态。

new Promise((resolve, reject) => {setTimeout(function () {resolve("success");}, 1000);
}); new Promise((resolve, reject) => {setTimeout(function () {reject("failed");}, 1000);
}); 

[2] 编写异步逻辑

let ps = new Promise((resolve, reject) => {setTimeout(function () {resolve("success");}, 1000);
}); ps.then((data)=>{console.info("result is: " + data)
}).catch((data)=>{console.info("exception is: " + data)
})

异步逻辑通过then和catch完成，promise对象转为(或处于)fulfilled时，执行then逻辑；promise对象转为(或处于)rejected时，执行catch逻辑。参数data分别是调用resolve和reject方法时的入参。

[3] 案例介绍

function generateOddNumber(){let ps = new Promise(function(resolve, reject){setTimeout(function(){var num = Math.ceil(Math.random() * 100);if(num % 2 == 1){resolve('[Success] Odd is：' + num);}else{reject('[Failed] Even is：' + num);}}, 1000);})return ps;
}generateOddNumber()
.then(function(data){console.log(data);}
)
.catch(function(data){console.log(data);
}); 

运行结果如下所示:

[Success] Odd is：73

说明：由于Promise创建时会立即执行传入的函数，一般将Promise的创建放在函数内部，调用函数时才会创建Promise对象。基于Promise的特点，常在then中返回Promise对象以形成链式回调。除此之外，Promise支持通过all和race将多个Promise绑定在一起执行，all是所有Promise均完成而race表示至少一个Promise完成。

2.async和await

async与await的组合是一种基于Promise实现的异步编程方法。
async写在方法前用于标记异步方法，js会异步执行该方法(本质上是一个Promise对象包裹的函数)，即不会因该方法阻塞而阻塞整体的执行流程。
await必须用在aync标记的方法内，表示等待逻辑执行完成，await会阻塞方法内后续的逻辑。
使用案例如下所示：

function generateFruit() {return new Promise((resolve, reject) => {setTimeout(() => resolve('apple'), 10000);})
}async function test() {console.log("test begin")// await此时会等待异步逻辑generateFruit执行完成，才会继续执行下一行代码let result = await generateFruit()console.log("test end, result is " + result)console.log("test end")
}console.log("main begin")
// test是async方法，不会阻塞下一行运行
test()
console.log("main end")

执行结果如下:

main begin
VM142:8 test begin
VM142:16 main end
VM142:10 test end, result is apple
VM142:11 test end

3.fetch

fetch方法用于代替jquery的ajax实现http请求调用，其位于浏览器的window对象中，因此不需要添加依赖。
使用方法较为简单，如案例所示:

fetch("http://127.0.0.1:8182/test/api/createFruite",{mode: 'cors',method: "POST",headers: {"Content-Type": "application/json"},body: JSON.stringify({"id": 123456789,"name": "apple"})}).then(function (res) {if (res.ok) {console.log(res.body);console.log("call http success");}}).catch(function (e) {console.log("call http failed")});

fetch方法会返回一个Promise对象，因此可通过then和catch开发异步逻辑。

4.axios

axios是基于Promise对原生 XMLHttpRequest 的封装以及增强，如提供了拦截器功能。
安装axios：

 npm install axios

在使用的地方通过import导入:

import axios from 'axios'

axios用法：
可通过axios提供的get/put/post等方法，也通过配置项method指定HTTP方法类型：

#axios的get方法
axios.get('http://127.0.0.1:8182/test/api/queryFruite', {params: {id: 1}
}).then(res => {console.log(res);
}, err => {console.log(err);
})#在axios的配置项method中指定
axios({method: 'get',url: 'http://127.0.0.1:8182/test/api/queryFruite',params: {id: 1}
}).then(res => {console.log(res);
}, err => {console.log(err);
})

常见的axios的配置项有
[1] url 请求路径
[2] method 方法
[3] headers 请求头
[4] params 请求参数(追加到url后)
[5] data 请求消息体
[6] timeout 请求超时时长(单位ms)

一般，对同域请求写在一个js中，可以基于baseURL创建一个公共的axios实例对象，如下所示：

const apiClient = axios.create({baseURL: 'http://127.0.0.1:8182/test',headers: {timeout: 5000}
})const listLocalModels = async function () {const response = await apiClient.get('/queryFruite')return response.data
}const showModelInformation = async function (request) {const response = await apiClient.post('/createFruite', request)return response.data
}

拦截器使用方式：

拦截器使用如下所示:

在根目录下创建文件".env":

VITE_API_URL=http://127.0.0.1:8182/test

定义一个axios实例，在该实例上设置拦截器:

import axios from 'axios'const instance = axios.create({baseURL: `${import.meta.env.VITE_API_URL}/api`,timeout: 5000
});// 请求拦截器  
instance.interceptors.request.use(config => {//config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');return config;},error => {return Promise.reject(error);}
);// 响应拦截器  
instance.interceptors.response.use(response => {//...return response.data;},error => {return Promise.reject(error);}
);// 封装 get 请求  
export async function get(url, params = {}) {return await instance.get(url, {params});
}// 封装 post 请求  
export function post(url, data = {}) {return instance.post(url, data);
}