• 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为失败信息
         }
    });
  • 相关阅读:
    第二十二篇、服务器返回的数据转成模型
    第二十一篇、广告轮播器(支持循环滚动)
    【转】android应用程序的安装方式与原理
    【转】Android中处理崩溃异常
    android在Data目录内置可删除的APP
    Ubuntu下修改system.img 解包system.img、打包system.img
    Android studio打包APK混淆配置
    Android获取焦点所在控件
    Android根据APP包名启动应用
    Android自动更新安装后显示‘完成’‘打开’按钮
  • 原文地址:https://www.cnblogs.com/yangfei123/p/12745008.html
Copyright © 2020-2023  润新知