axios是基于promise用于瀏覽器和node.js的http客戶端形耗。
axios的作用是什么呢：axios主要是用于向后臺發(fā)起請求的彻磁，還有在請求中做更多是可控功能碍沐。有以下特點：支持瀏覽器和node.js、支持promise衷蜓、能攔截請求和響應(yīng)累提、能轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)、能取消請求磁浇、自動轉(zhuǎn)換JSON數(shù)據(jù)斋陪、瀏覽器端支持防止CSRF(跨站請求偽造)
promise是什么：是一個對象用來傳遞異步操作的信息，它代表了某個未來才會知道結(jié)果的事件（通常是一個異步操作）置吓，并且這個事件提供統(tǒng)一的api无虚，可供進(jìn)一步的處理。promise的作用：Promise的出現(xiàn)主要是解決地獄回調(diào)的問題衍锚，比如你需要結(jié)果需要請求很多個接口友题，這些接口的參數(shù)需要另外那個的接口返回的數(shù)據(jù)作為依賴，這樣就需要我們一層嵌套一層戴质，但是有了Promise 我們就無需嵌套度宦。promise的本質(zhì)是什么：分離異步數(shù)據(jù)獲取和業(yè)務(wù)
1、axios基礎(chǔ)用法
1.1告匠、get請求demo
// 為給定 ID 的 user 創(chuàng)建請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可選地戈抄，上面的請求可以這樣做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
1.2、post請求demo
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
1.3后专、執(zhí)行多個并發(fā)請求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 兩個請求現(xiàn)在都執(zhí)行完成
}));
1.4划鸽、API
1.4.1 請求配置
axios.get('/user', {
params: {
ID: 12345
},
// `timeout` 指定請求超時的毫秒數(shù)(0 表示無超時時間)
// 如果請求話費了超過 `timeout` 的時間，請求將被中斷
timeout: 1000,
// `withCredentials` 表示跨域請求時是否需要使用憑證
withCredentials: false, // 默認(rèn)的
// 'proxy' 定義代理服務(wù)器的主機(jī)名稱和端口
// `auth` 表示 HTTP 基礎(chǔ)驗證應(yīng)當(dāng)用于連接代理戚哎，并提供憑據(jù)
// 這將會設(shè)置一個 `Proxy-Authorization` 頭裸诽，覆寫掉已有的通過使用 `header` 設(shè)置的自定義 `Proxy-Authorization` 頭。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
1.4.2 響應(yīng)結(jié)構(gòu)
{
// `data` 由服務(wù)器提供的響應(yīng)
data: {},
// `status` 來自服務(wù)器響應(yīng)的 HTTP 狀態(tài)碼
status: 200,
// `statusText` 來自服務(wù)器響應(yīng)的 HTTP 狀態(tài)信息
statusText: 'OK',
// `headers` 服務(wù)器響應(yīng)的頭
headers: {},
// `config` 是為請求提供的配置信息
config: {}
}
1.5 全局的 axios 默認(rèn)值
axios.defaults.timeout = 2000;
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
2建瘫、axios和vue結(jié)合
2.1 get
const SERVERIP = "";
export const apiLogin = (userid, password) => {
return axios.get(`${SERVERIP}/api/login/login?userid=${userid}&password=${password}`);
}
import { apiLogin } from "./api/api.js";
apiLogin(this.userid, this.pwd).then(res => {
});
2.2 post
const SERVERIP = "";
export const updateUserPwd = (params) => {
return axios({
method: 'post',
url: `${SERVERIP}/api/user/update`,
data: params
})
}
import { apiLogin } from "./api/api.js";
obj = JSON.stringify(obj);
updateUserPwd(obj).then(res => {
});
3崭捍、同步實現(xiàn)
3.1 、簡單模式實現(xiàn)
getBu();
function chinaCity(){
// return axios.get('./lib/chinaCity.json')
return axios.get('./lib/chinaCity.json',{
params:{ //傳值模式
id:222
}
})
}
async function getBu(){
var data = await chinaCity();
console.log(data)
}
3.1 啰脚、常用模式
const SERVERIP = "";
export const apiLogin = (userid, password) => {
return axios.get(`${SERVERIP}/api/login/login?userid=${userid}&password=${password}`);
}
import { apiLogin } from "./api/api.js";
methods: {
async myLogin(){
var res = await apiLogin(this.userid, this.pwd);
console.log(res.data)
}
}
