• vue安装 axios


    1.安装axios

    npm install axios -S

    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);
      }).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 './api/index.js';
    Vue.prototype.$api = Api;

    然后在需要的地方调用即可

    this.$api.post('user/login.do(地址)', {
        "参数名": "参数值"
    }, response => {
         if (response.status >= 200 && response.status < 300) {
            console.log(response.data);\请求成功,response为成功信息参数
         } else {
            console.log(response.message);\请求失败,response为失败信息
         }
    });
  • 相关阅读:
    考在职还是全日制?
    ARP欺骗病毒攻击
    AutoCAD2006安装错误之解决
    WINCE下创建多个文件分区
    在WINCE5.0中应用CMD(比如运行PING命令)
    WinCE 应用程序开机自动方法
    Wince 添加中文字库
    WinCE内核裁减(中文字体)及字库和内核的分离(转)
    WINCE基于CH7024实现TV OUT (VGA)功能
    WINCE6.0 中文支持
  • 原文地址:https://www.cnblogs.com/yangfei123/p/12745008.html
Copyright © 2020-2023  润新知