vue中使用axios

標籤：export   baseurl   encode   cat   code   data   min   請求   create   

1.安裝axios

npm：

$ npm install axios -S

cdn：

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

2.配置axios

在項目中建立api/index.js檔案，用以配置axios

api/index.js

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

首先在main.js中引入方法

import Api from ‘./api/index.js‘;Vue.prototype.$api = Api;

然後在需要的地方調用即可

this.$api.post(‘user/login.do(地址)‘, {    "參數名": "參數值"}, response => {     if (response.message === undefined) {        this.$message.success(response);\\請求成功，response為返回參數     } else {        this.$message.error(response.message);\\請求失敗，response為失敗資訊     }});

vue中使用axios