在Vue中,axios封装、api封装、调接口

1.封装请求

在Vue中,axios封装、api封装、调接口

 (1)utils->request.js

  • 引入axios、token,定义请求头格式
  • 定义基础路径
  • 创建axios实例--配置路径
  • 请求拦截器
  • 响应拦截器
  • 向外界暴露请求的基础路径和axios实例对象
import axios from 'axios'
import { getToken } from '@/utils/auth'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';

//1.定义基础路径
const baseUrlLogin = 'http://192.168.3.54:8010';//dev2-login
const baseUrlOther = 'http://192.168.3.54:8011';//dev2-other

//2. 创建axios实例
const service = axios.create({
  baseURL:baseUrlOther, //配置默认的baseURL
  timeout: 30000,// 超时
})
//3. request请求拦截器(必须登录[含有token],才能发出请求)
service.interceptors.request.use(
  config => {
//获取token,存在时设为请求头
//const token = window.sessionStorage.getItem("token")
//if(token){
 //config.headers.Authorization = token
//} 
//return config
    if (getToken()) {
      config.headers['tokenKey'] = "merchantToken"; // 让每个请求携带自定义token 请根据实际情况自行修改
      config.headers['merchantToken'] =getToken();
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)
// 4.响应拦截器--(处理返回的数据)
service.interceptors.response.use(response => {
    // console.log(response);
    // 对响应数据做点什么
    let data = response.data;
    let errorCode = data.code;
    if (errorCode==200){//成功
      return data;
    } else if (errorCode == 401) {//token失效,会话过期
//移除token,即退出登录
//window.sessionStorage.removeItem("token")
      vue.$store.dispatch("LogOut");
      vue.$message.error("会话过期,请重新登陆");
      return Promise.reject("会话过期");
    }else {
      return Promise.reject(data);
    }

  }, (error) => {
    // 对响应错误做点什么
    console.log(error);
    if (error.response) {
      // 请求已发出,但服务器响应的状态码不在 2xx 范围内
      vue.$message.error("服务器异常,请稍后重试");
      return Promise.reject('服务器异常,请稍后重试');
    } else {
      // Something happened in setting up the request that triggered an Error
      vue.$message.error("网络异常,请稍后重试");
      return Promise.reject('网络异常,请稍后重试');
    }
  }
)
//5.向外界暴露
export {baseUrlLogin,baseUrlOther,service}

(2)Api->login.js

  • 引入基础路径和axios实例对象
  • 封装接口函数,并暴露出来
//1.引入基础路径和axios实例
import {baseUrlLogin,baseUrlOther,service} from '@/utils/request'

export function queryWikiList(pageNum,pageSize,data) {
  return service({
    url: `/web/wiki/queryWikiList?pageNum=${pageNum}&pageSize=${pageSize}`,
    method: 'post',
    data:data
  })
}
//2.封装接口函数,并暴露出来
export function getWikiDetail(id) {
  return service({
    url: `/web/wiki/getWikiDetail?id=${id}`,
    method: 'get'
  })
}

(2)Vue组件中调用api函数

  • 引入接口函数
  • 在方法中调用函数,获得接口数据
//1.引入接口函数
import { getWikiDetail } from '@/api/home'
//2.在方法中调用接口函数,获得接口数据
getWikiDetail().then(res =>{
console.log(res) // 就是请求回来的结果 
}).catch(err=>{
console.log(err)
})

上一篇:【Element UI】axios 与 Api文件夹的配置


下一篇:Angular 为什么要引入 injection token 的概念