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;
})
}
}
})