vue中axios的封装及应用(未梳理完)

1.安装axios：

npm install --save axios vue-axios qs

2.main.js引入：

// 引入axios，并加到原型链中
import axios from 'axios';
Vue.prototype.$axios = axios;
import QS from 'qs'
Vue.prototype.qs = QS;

3.封装axios

（1）在 src 下面创建文件夹 request  在分别创建 api.js 统一管理我们的接口  http.js封装axios

          -> api.js //接口域名 封装
request 
          ->http.js  //http请求 封装

 （2）api.js:

我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。 axios.defaults.baseURL可以设置axios的默认请求地址 

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

多api： 一个项目需要调用多个域名下的接口

（1）

// 导出 对应的不同接口的URL地址
// const configUrl = {
var baseURL= 'http://miaomiao.aaa.cn/api.php/shaoer/' //模块一接口地址

var oldURL  = 'http://yyds.cn/index.php?s=/BBB/aaa/' //模块二接口地址

var videoUrl = 'https://desktop-yikao.oss-cn-beijing.aliyuncs.com/old_soft/child/course/music/'
// }

export default {baseURL,oldURL}

（2）  封装成方法的形式 

/** 
 * api接口的统一封装
 */
import request from '@/request/http';
import Qs from 'qs';

// 登录
export function GetUserLogin(query) {
    return request({
        url: 'User/GetUserLogin',
        method: 'post',
        data: Qs.stringify(query)
    })
}

（3）http.js:

import axios from 'axios'
import qs from 'qs'
import apiUrl from '../request/api' //引入api.js

// axios 默认配置
// axios.defaults.timeout = 5000 // 超时默认设置
// axios.defaults.baseURL = apiUrl.baseURL // 默认baseUR
// // axios.defaults.responseType = 'json' // 默认数据相应类型
// axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'//application/x-www-form-urlencoded 
//post的请求头为application/x-www-form-urlencoded;charset=UTF-8 
// axios.defaults.withCredentials=true;// 表示跨域请求时是否需要使用凭证


var instance = axios.create({
  baseURL: apiUrl.baseURL,
  timeout: 1000 * 12, // 创建axios实例,设定超时时间是12s
  withCredentials: true, // 允许携带cookie
  headers: {
    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
  }
});

//get baseURL
export default (url, data = {}, type = 'GET') => {
  url = apiUrl.baseURL + url
  type = type.toUpperCase()

  /*
    get 方法封装
    @param url
    @param data
    @returns {Promise}
  */
  if (type === 'GET') {
    return new Promise((resolve, reject) => {
      axios.get(url, { params: data })
        .then(res => {
          res = res.data
          res.data=res.result  //注意：res数据 要根据后端传来的接口数据格式 获取 
          // console.log(res)
          if (res.status == 1) {  //可能是1 或 200
            resolve(res.data)
            // console.log(res)
          } else {
            // console.log(2)
            reject(res.data)
          }
        }, err => {
          console.log(err)
          reject(err)
        })
    })
  }

  /*
    post 方法封装
    @param url
    @param data
    @returns {Promise}
  */
//post oldURL
  if (type === 'POST') {

    var url = apiUrl.oldURL + url  //根据get，post拼接不同的域名

    return new Promise((resolve, reject) => {
      axios.post(url, qs.stringify(data))
        .then(res => {
          res = res.data
          res.data=res.result

          if (res.code === 200) {
            resolve(res.data)
          } else {
            reject(res.data)
          }
        }, err => {
          // console.log(err)
          reject(err)
        })
    })
  }
}