VUE 数据请求和响应(axios)

时间 2019-11-25

标签 vue 数据求和响应 axios 繁體版

原文原文链接

1. 概述

1.1 简介

　　axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库，用于浏览器和 nodejs 的 HTTP 客户端。具备如下特征：vue

- 从浏览器中建立 XMLHttpRequests
  - XMLHttpRequest对象用于在后台与服务器交换数据，可作到在不从新加载页面的状况下更新网页，在页面已加载后从服务器请求数据或接收数据，在后台向服务器发送数据。全部的浏览器都支持XMLHttpRequest对象。
- 从 node.js 建立 http 请求
  - 如get/post等
- 支持 Promise API
  - 如promise所支持的链式回调，.then(res => {}).catch(err =>{})
- 拦截请求和响应
  - 在请求以前或响应以后进行的处理，如请求以前增长统一的token标识，响应以后对公用的错误进行处理等。
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防护XSRF

1.2 引入使用

　　npm install axios 进行安装，安装成功后 import axios from 'axios' 进行引入模块，再对axios对象进行设置。如node

/**
 * 建立axios对象
 **/
let axiosInstance =axios.create({
  baseURL: configHttp.domain,
  withCredentials:true,
});

　　备注：使用 Vue.prototype.$http = axios; 进行配置于vue项目中，在页面中可以使用this.$http.get('xxxx').then().catch()。ios

1.3 经常使用请求配置

　　1.3.1 url

　　数据请求的服务器URL，此配置必须存在，不然无访问路径没法进行数据请求。web

　　1.3.2 method

　　建立请求时使用的方法，默认get方式。有多种请求方式，如：request/get/delete/head/post/put/patch，经常使用get与post.npm

　　1.3.3 baseURL

　　设置一个统一的基础路径(如http://www.demo.com/api/)，使axios的get或post中的url使用相对URL，更改访问域名或端口号时只更改对应的baseURL值便可。json

　　1.3.4 headers

　　headers是即将被发送的自定义请求头，可设置请求的数据标识(token)或post请求的数据类型等。axios

　　1.3.5 timeout

　　请求超时时间，单位为毫秒，若超过超时时间则请求中断。0表示无超时时间。api

　　1.3.6 withCredentials

　　跨域请求时是否须要使用凭证，默认为false跨域

1.4 配置的默认与自定义实例

　　优先级别为：自定义实例>全局默认值>自带默认值promise

　　1.全局默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

　　2.自定义实例

// 建立实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 在实例已建立后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

　　备注：也可在请求拦截中进行设置对应的配置。

1.5 拦截器

　　在请求或响应被 then 或 catch 处理前拦截他们，分为请求拦截器和响应拦截器；

- 请求拦截器(interceptors.request)是指能够拦截每次或指定HTTP请求，并可修改配置项。
- 响应拦截器()能够拦截每次HTTP请求对应的响应，并可修改返回结果项。

　　示意图：

　　通常在请求拦截器中增长标识token或其余请求配置，在响应拦截器中对统一错误或状态码进行处理(跳转统一页面如登陆)

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求以前作些什么
    return config;
  }, function (error) {
    // 对请求错误作些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据作点什么
    return response;
  }, function (error) {
    // 对响应错误作点什么
    return Promise.reject(error);
  });

2. 实例

2.1 axios配置

　　备注：在headers.post['Content-Type']不为application/json时，传递post参数时需使用querystring中的querystring.stringify对参数进行格式化处理。

import axios from 'axios'
import configHttp from '../../configHttp'

/**
 * 建立axios对象
 **/
let axiosInstance =axios.create({
  baseURL: configHttp.domain,
  withCredentials:true,
});

/**
 * 访问请求拦截(在请求前处理)
 **/
axiosInstance.interceptors.request.use(
  function (config) {
    config.headers.common['Platform'] = 'web';
    return config;
  },
  function (error) {
    return Promise.reject(error)
  }
);

/**
 * 响应请求拦截(在响应前处理)
 **/
axiosInstance.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    if(error.response){
      let status=error.response.status;
      switch (status) {
        case 401:
            // 跳转至login
          break;
      }
    }
    //处理报错 记录日志
    if (error !== undefined) {
      console.log(error);
    }

  }
);
/**
 * http请求响应处理函数
 **/
let httpResponseHandle = function(){
  let self = this;
  let res = self.res;
  if (res.code == '0') {
    self.successCallback && self.successCallback(res);
  } else if (res.code == 'C00004' || res.code =='C00002') {
    // 清除token
    // 跳转至login
  } else {
    // 统一错误弹出
    self.failCallback && self.failCallback(res);
  }
};

let http= {
  /**
   * 以get方式请求获取JSON数据
   * @param {Object} opts 配置项，能够包含如下成员：
   * @param {String} opts.url 请求地址
   * @param {Object} opts.params 附加的请求参数
   * @param {Function} opts.successCallback 成功的回调函数
   * @param {Function} opts.failCallback 失败的回调函数
   * **/
  get: function (opts) {
    axiosInstance
      .get(opts.url, {params: opts.params})
      .then(function (res) {
        opts.res = res.data;
        httpResponseHandle.call(opts);
      })
      .catch(function (err) {
        if (err.response) {
          if (err.response.data) {
            opts.res = err.response.data;
            httpResponseHandle.call(opts);
          } else {
            // 统一错误弹出
          }
        }
      });
  },

  /**
   * 以post方式请求获取JSON数据
   * @param {Object} opts 配置项，能够包含如下成员：
   * @param {String} opts.url 请求地址
   * @param {Object} opts.params 附加的请求参数
   * @param {Function} opts.successCallback 成功的回调函数
   * @param {Function} opts.failCallback 失败的回调函数
   * **/
  post: function (opts) {
    axiosInstance
      .post(opts.url, opts.params)
      .then(function (res) {
        opts.res = res.data;
        httpResponseHandle.call(opts);
      })
      .catch(function (err) {
        if (err.response) {
          if (err.response.data) {
            opts.res = err.response.data;
            httpResponseHandle.call(opts);
          } else {
            // 统一错误弹出
          }
        }
      });
  }
};

export default http;

2.2 实例调用

　　在Vue中使用prototype进行设置，不能使用use设置。

　　1.main.js中直接写入

import http from '@/common/js/http.js';
Vue.prototype.$http = http;

　　2.其余引入

import Vue from 'vue'
import axios from '../common/js/http.js'

Vue.prototype.$http = axios

2.3 页面使用

　　vue单页面中的methods中使用

　　1.get示例

  this.$http.get({
          url: 'comm/getDataInfo',
          params: {
            param1: xxx,
            param2: '3'
          },
          successCallback: res => {
            // 数据处理
          },
          failCallback: res => {}
        });

　　2.post示例

   this.$http.post({
        url: 'common/userLogin',
        params: {
          username: 'admin',
          password: '123456'
        },
        successCallback: res => {
          // 数据处理
        },
        failCallback: res => {}
      });