vue安装 axios

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！