vue安装 axios

迷南。 2023-07-24 09:09 26阅读 0赞

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。  
话不多说，直接上步骤：  
安装：  
1.执行下面命令  
npm方式

npm install axios

cdn方式

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