1.静态引用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.npm方式安装(推荐)

$ npm install axios --save
-save ==> 是指将包信息添加到 package.json 里的 dependencies节点,表示发布时依赖的包。
-save-dev ==> 是指将包信息添加到 package.json 里的 devDependencies节点,表示开发时依赖的包。

调用

import axios from 'axios';

  

3.八种API (详细介绍 : https://www.npmjs.com/package/axios

1.axios.request(config)
2.axios.get(url[, config])
3.axios.delete(url[, config])
4.axios.head(url[, config])
5.axios.options(url[, config])
6.axios.post(url[, data[, config]])
7.axios.put(url[, data[, config]])
8.axios.patch(url[, data[, config]])

4.接收响应信息

axios.get('/user/12345').then(function(response) {
console.log(response.data); // 响应数据
console.log(response.status); // 状态码
console.log(response.statusText); // 服务器的响应的HTTP状态信息
console.log(response.headers); // 响应头
console.log(response.config); // 提供给`axios`该请求的配置
});

5.多个接口一起调用

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) {
// Both requests are now complete
}));

二.常见的请求

new Vue({
// 全局拦截
mounted: function(){
// 请求前
axios.interceptors.request.use(config => {
console.log("request 请求前");
return config;
}) // 拦截响应的请求
axios.interceptors.response.use(response => {
console.log("request 响应的请求前")
return response;
})
},
methods: {
// get请求
get: function(){
axios.get("package.json", {
params: {
userId: "999"
},
headers: {
token: "Alan"
}
}).then(res => {
this.msg = res.data;
}).catch(error => { // catch是捕获异常
this.msg = "error" + error;
})
},
// post请求
post: function(){
axios.post("package.json", {
// 参数
userId: "888"
},{
headers: {
token: "Alanpost"
}
}).then(res => {
this.msg = res.data;
}).catch(error => { // catch是捕获异常
this.msg = "error" + error;
})
}, // axios底层配置
http: function(){
axios({
url:"package.json",
method: "get",
// post参数
data: {
urseId: "101"
},
// get参数
params: {
userId: "102",
},
headers: {
token: "http"
}
}).then(res => {
this.msg = res.data;
})
}
}
})
05-12 08:17