提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
一、Promise 是什么?
ECMAscript 6 原生提供了 Promise 对象。
Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。
简单来说就是异步处理,异步加载数据等
二、异步和同步又是什么?
简单来说:
同步就是我强依赖你(对方),我必须等到你的回复,才能做出下一步响应。 同步似乎等价于阻塞,异步则等价于非阻塞,好比就是单车道和多车道的感觉,同步就是单车道,前面塞车的话就只能等车子走了才能走我这个“程序”,而异步就可以很好解决这个问题,毕竟路多了,当然就是畅通了
二、上代码
1.axios版本 (vue)
好像axios就是基于Promise上开发了,但是具体我也没了解,之前vue的话用的多,这个插件。算了也搞一版。
这里直接是封装了一个js,已经把方法导出:
import axios from "axios"
const myRequest = (options) =>{
return new Promise((resolve,reject) => {
axios({
url: options.url,
method:options.method || 'POST',
data:options.data || {},
}).then((res) => {
resolve(res) //将结果导出
})
})
}
export {myRequest}
这里是在main.js里面的操作(导入和挂载全局)
import {myRequest} from "@/assets/js/api.js"
Vue.prototype.$myRequest = myRequest
使用!!!
async getdata (state, a) {
await this.$myRequest(
{ url: "/data/world-top10", //请求路径
method: "GET" //请求方式
}
).then((res) => {
//这里的res直接就是上面resolve()返回出来的结果啦!也就是你请求成功的结果
console.log(res)
}
})
}
2.uni-app
挂载和使用和上面的一样,这里就不多bb直接上封装的代码:
const myRequest = (options) =>{
return new Promise((resolve,reject) => {
uni.request({
url:options.url,
method:options.method || 'POST',
data:options.data || {},
header:encryptDes(), //这是请求头的设置
success: res => {
resolve(res) //返回请求成功结果
},
fail: (err) => {
reject(err) //返回请求失败信息
}
})
})
}
export {myRequest}
3.ajax版本
function ajax(URL) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', URL, true);
req.onload = function () {
if (req.status === 200) {
resolve(req.responseText);//成功信息
} else {
reject(new Error(req.statusText));
}
};
req.onerror = function () {
reject(new Error(req.statusText));
};
req.send();
});
}
var URL = "/try/ajax/testpromise.php"; //请求的链接
ajax(URL).then(function onFulfilled(value){
document.write('内容是:' + value);
}).catch(function onRejected(error){
document.write('错误:' + error);
});
总结
可能讲的有不对的地方,欢迎大家留言喔!!emmmmmm,用的话是没什么问题的,就当做笔记吧!!!!