为古汉字老人做网站,网络运营与维护,做电工的有接单的网站吗,百度小程序还需要做网站吗背景#xff1a;
本文介绍promise使用方式#xff0c;以及以Promise为基础的async/await用法和fetch/axios使用方式#xff0c;主要以案例的方式进行。
1.promise
1.1 promise介绍
javascript是单线程执行的#xff0c;异步编程的本质是事件机制和函数回调。当执行阻塞…背景
本文介绍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 endpromise被用于解决该问题而被引入, 使用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 is73说明由于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 end3.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 axiosaxios用法 可通过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_URLhttp://127.0.0.1:8182/test定义一个axios实例在该实例上设置拦截器:
import axios from axiosconst 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);
}
