axios
是什么??
axios是基于promise(諾言)用于瀏覽器和node.js是http客戶端绢馍。
作用?忍宋?
axios主要是用于向后臺(tái)發(fā)起請(qǐng)求的痕貌,還有在請(qǐng)求中做更多是可控功能。
特點(diǎn)糠排??
1,支持瀏覽器和node.js
2,支持promise
3,能攔截請(qǐng)求和響應(yīng)
4,能轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
5,能取消請(qǐng)求
6,自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
7,瀏覽器支持防止CSRF(跨站請(qǐng)求偽造)
promise
是什么舵稠??
是一個(gè)對(duì)象用來傳遞異步操作的信息入宦,它代表了某個(gè)未來才會(huì)知道結(jié)果的事件(通常是一個(gè)異步操作)哺徊,并且這個(gè)事件提供統(tǒng)一的api,可供進(jìn)一步的處理乾闰。
作用落追??
Promise的出現(xiàn)主要是解決地獄回調(diào)的問題涯肩,比如你需要結(jié)果需要請(qǐng)求很多個(gè)接口轿钠,這些接口的參數(shù)需要另外那個(gè)的接口返回的數(shù)據(jù)作為依賴,這樣就需要我們一層嵌套一層病苗,但是有了Promise 我們就無需嵌套
本質(zhì)疗垛??
分離異步數(shù)據(jù)獲取和業(yè)務(wù)
promise二次分裝axios手寫代碼
import Axios from "axios";
class Http {
//request 方法
request(params) {
return new Promise((resolve, reject) => {
Axios({
method: params.type || "get",
url: params.url,
data: params.data,
headers: params.headers
}).then(res => {
if (res.data.code === 0) {
resolve(res);
} else {
alert(res.data.msg);
}
}).catch(err => {
reject(err.statusText); //失敗
});
});
}
}
export default Http;
寫方法,獲取接口
//引入封裝好的axios
import Http from "../utils/http";
//實(shí)例化一個(gè)類
const _http = new Http();
//注冊(cè)的請(qǐng)求
class Login {
//短信驗(yàn)證碼
login(mobile) {
return _http.request({
type:"post",
url: `https://api.it120.cc/small4/verification/sms/get?mobile=${mobile}`,
data:"",
headers:""
});
}
}
//拋出
export default Login
使用接口時(shí)
//引入
import Product from "../services/product";
//實(shí)例化
const _product = new Product();
export default {
created(){
_product.CodeVerifier().then(res => {
//res 就是響應(yīng)回來的數(shù)據(jù)
res.data.data;
});
}
}