Axios 的基本用法
1. Axios是什么
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单点说：就是前端往后端传数据的 ，promise 是ES6新增的异步处理对象，这里不多说。有兴趣的可以看着个网址：
promise是什么
2. Axios 的安装
首先查看 vue工程中的package.json 文件的 devDependencies 中有没有
"axios": "^1.4.0" 类似的节点，没有要安装 （别断网了）
在工程根目录的CMD中键入： npm install axios
3. Axios导入vue工程
在vue页面的 script 节点中写如下代码（注意写在最上面）：
import axios from 'axios';
import qs from 'qs';
4. 用get 方式发送数据
let param = {
params: {
ID: 12345
}
}; // 这是要传的参数
let url = '/house/testPage' ; // 这是后端的具体地址，注意后端返回的必须是 JSON格式的数据。 axios.get(url, param)
.then(function (response) {
alert( JSON.stringify(response.data) ); // response.data就是后端返回的JSON对象
})
.catch(function (error) {
console.log(error);
});
5.用post方式发送数据
和get方式有点不一样,要用 qs转换一下。
let sobj= {
ID: 12345
};
let url = '/house/testPage' ;
let param = qs.stringify(sobj);
axios.post(url, param)
.then(function (response) {
alert(JSON.stringify(response.data));// response.data就是后端返回的JSON对象
})
.catch(function (error) {
console.log(error);
});
6.文件上传
文件上传和get ,post都不一样。
1.首先html上的表单要求（注意红色部分）：
2.要求先用 FormData 对象封装表单后才能发送：
const formData = new FormData( document.getElementById("myform") );
let urls = '/house/uploadFile2' ;
axios({
url: urls,
method: 'post',
headers: {"Content-Type":"multipart/form-data"},
data: formData
})
.then(function (response) {
// 后端返回的JSON对象中包含有code 属性下面代码才生效
if(response.data.code > 0){
console.log("文件上传成功。");
}else{
console.log("文件上传失败！！");
}
})
.catch(function (error) {
console.log(error);
});
7. Axios 后端返回对象（response）的具体结构
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
一般用data(这个就是传回的json数据对象)，status 是HTTP状态码也有用，其它的看具体情况。
8.拦截器interceptors
在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果你想在稍后移除拦截器，可以这样
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
注意这个是请求拦截和拦截移除，响应请把 request 改为 response 。
9.执行多个并发程序
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) {
// 两个请求现在都执行完成，acct, perms 就是每个方法返回的 response
}));
10.补充一下中文的学习网址
Axios的方法是很多的，本文只能讲基本用法，深入研究请大家看一下网址
Axios中文帮助
