Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
话不多说,直接上步骤:
安装:
1.执行下面命令
npm方式
npm install axios
cdn方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.配置axios
在项目中新建api/index.js文件,用以配置axios
然后添加以下代码
import axios from 'axios';
let http = axios.create({
baseURL: 'http://localhost:8080/',
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
transformRequest: [function (data) {
let newData = '';
for (let k in data) {
if (data.hasOwnProperty(k) === true) {
newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
}
}
return newData;
}]
});
function apiAxios(method, url, params, response) {
http({
method: method,
url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
}).then(function (res) {
response(res);
}).catch(function (err) {
response(err);
})
}
export default {
get: function (url, params, response) {
return apiAxios('GET', url, params, response)
},
post: function (url, params, response) {
return apiAxios('POST', url, params, response)
},
put: function (url, params, response) {
return apiAxios('PUT', url, params, response)
},
delete: function (url, params, response) {
return apiAxios('DELETE', url, params, response)
}
}
这里的配置了POST、GET、PUT、DELETE方法。并且自动将JSON格式数据转为URL拼接的方式
同时配置了跨域,不需要的话将withCredentials设置为false即可
并且设置了默认头部地址为:http://localhost:8080/,这样调用的时候只需写访问方法即可
3.使用axios
注:PUT请求默认会发送两次请求,第一次预检请求不含参数,所以后端不能对PUT请求地址做参数限制
首先在main.js中引入方法
import Api from '@/assets/api/index.js'
Vue.prototype.$api = Api;
然后再在需要使用的地方调用就可以了
转载:https://www.jianshu.com/p/1209bc39b3ae