vue中Axios的封装和API接口的管理

准备

在我们学习之前我们需要准本一些东西

• 数据接口 目前我使用的是聚合数据，因为只是学习所以我们只要最后接口可以通就行。但是聚合数据现在不支持跨域所以我们要使用到chrome的cors插件。

目标

从本文能够学到对aixos在vue中的简单封装实现在不同环境下对应多个api接口实现接收数据

安装

npm install axios; // 安装axios

目录结构

axios.js

import axios from "axios";
import QS from 'qs';


// 请求超时时间
axios.defaults.timeout = 10000;




//请求拦截
axios.interceptors.request.use(
  function (config) {
    return config
  },
  function (err) {
    return Promise.reject(err);
  }
)

//响应拦截
axios.interceptors.response.use(
  function (res) {
    return res
  },
  function (err) { //当状态码不是200
    return Promise.reject(err);
  }
)

// 简单封装 get和 post 请求
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err.data)
    })
  });
}
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, QS.stringify(params))
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

• 引入qs模块，用来序列化post类型的数据
• 设置请求超出时间
• 在请求拦截和响应拦截中我们可以对不同的状态码来进行不同的操作
• 对post和get进行简单的封装

base.js

import axios from "axios";

// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
let baseurl,baseurl2;

// 环境的切换
if (process.env.NODE_ENV == 'test') {    
    baseurl = 'http://apis.juhe.cn';
    baseurl2= 'http://apis.juhe.cn';
} 
  else if (process.env.NODE_ENV == 'debug') {    
    baseurl = 'http://apis.juhe.cn';
  } 
  else if (process.env.NODE_ENV == 'production') {    
    baseurl = 'http://apis.juhe.cn';
  }
  else{
      console.log(process.env.NODE_ENV);
  }

const base = {
    test2: baseurl2,
    test3: baseurl
}
export default base;

• 设置post的请求头
• 在不同的环境中我们设置不同的api接口，因为只是测试所以接口我是用同样的。但是在后面的请求方式进行改变

getdata.js

import {get,post} from './axios';
import base from './base';


// 获取天气1
export const whether = data =>get(`${base.test3}/simpleWeather/query`,data)
//获取天气2
export const getEvents= data =>post(`${base.test2}/simpleWeather/query`,data)   

• 引入在前面分装好的post和get接口
• 分别以post和get的方式来获取接口数据

调用代码

getWeather() {
  whether({
    city: this.city,
    key: '****',
  }).then((res) => {
    console.log(res)
    this.whether = []
    for (let i = 0; i < res.result.future.length; i++) {
      let gen = {
        date: '',
        temperature: '',
        weather: '',
      }
      gen.date = res.result.future[i].date
      gen.temperature = res.result.future[i].temperature
      gen.weather = res.result.future[i].weather
      this.weather.push(gen)
    }
  })
},
getWeather2() {
  getEvents({
    city: this.city,
    key: '*****',
  }).then(res => {
    console.log(res)
  })
},

• 其中key是我们在聚合数据中必要参数，每个人不一样

结果展示