http请求库axios的用法

本文讲解javascript http请求库axios的基本用法。axios是当前主流的网络请求库，可以用来请求http接口。可用于主流的框架如vuejs、reactjs等。

1. 创建axios实例

因为一个前端工程中可能会调用多个平台的接口，所以推荐为每个平台定义一个axios实例，这样可以针对每个平台做一些全局配置，如baseURL等。
创建文件./src/api/axiosRequestGame.js，文件名根据实际做修改。文件内容如下:

/**
 * 用于访问游戏后台api的axios实例
 */

//引入axios
import axios from "axios";

let axiosInstance = axios.create();
// axios默认配置
axiosInstance.defaults.timeout = 10000;
// baseUrl定义在html页面
axiosInstance.defaults.baseURL = "http://game.test.cn";

// 请求拦截
axiosInstance.interceptors.request.use(
  config => {
    // 给请求头加键值对
    config.headers["Content-Type"] = "application/json";
    return config;
  },
  error => {
    // 错误信息
    return Promise.reject(error.response);
  }
);

// 响应拦截
axiosInstance.interceptors.response.use(
  response => {
    if (response.data.code == 0) {
      // 异常请求要做的事
    } else {
      // 正常请求要做的事
      return response;
    }
  },
  error => {
    // 返回接口返回的错误信息
    return Promise.reject(error.response);
  }
);

export default axiosInstance;

代码中的axiosInstance.defaults.baseURL修改为实际的api接口地址。

2. 定义接口

如下给出了get、post json、post form几种接口请求的示例。
创建接口定义文件，如src/api/gameApi.js

// 导入http请求库
import axios from "@/api/axiosRequestGame";
import qs from 'qs';

// GET接口请求示例
export const getApi = function(params) {
  return axios({
    url: "/game/findPage",
    params: params
  });
};

/**
 * POST接口,传输body json的请求示例
 * @param params
 * @returns {AxiosPromise}
 */
export const postJsonApi = function(data) {
  return axios.post("/game/bulkEnableGame", data);
};



/**
 * POST接口,传输body form键值对字符串的请求示例
 * @param params
 * @returns {AxiosPromise}
 */
export const postForm = function(data) {
    let data = {
        "username":   "张三",
        "sex":  1,
    };

    const options = {
        method: 'POST',
        headers: { 'content-type': 'application/x-www-form-urlencoded' },
        data: qs.stringify(data),   // 用qs将js对象转换为字符串，形如'name=edward&age=25'
        url: "/send/sms"
    }; 
    return axios(options);
};