封装axios请求

封装axios请求

第一步
在vue项目里的src文件夹里面写 api 和 utils 文件夹

第二步
1、在api文件夹里面创建两个文件

在api.js里面写入

// import {getshouye_list,getshangping_list,getyiji_list,geterji_list,getxiangq_list,getzhuce_list,getyanzhengma_list,getyonghu_list,postdlxinxi_list,getdenglu_list} from './index'
import api from './index'
// axios
import request from '../utils/reques'

// 获取首页数据
export function getshouye_list(params) {
  return request({
    url: api.shouye_list,
    method: 'get',
    params,
    hideloading: false
  })
}

// 商品信息
export function getshangping_list(params={}) {
  return request({
    url: api.shangping_list,
    method: 'get',
    params,
    hideloading: false
  })
}

在index.js里面写入

const api = {
     // 首页接口
     shouye_list:"/api/Home/getHomeREC",
     // 商品信息
     shangping_list:"/api/Home/getHomeShowGoods",
     // 一级分类
     yiji_list:"/api/Goods/getCatsTree",
     // 二级分类
     erji_list:"/api/Goods/getCadGoods",
     // 商品详情
     xiangq_list:"/api/Goods/GetGoodsInfo",
     // 注册手机号是否被注册
     zhuce_list:"/api/Verify/GetPhone",
     // 短信验证码
     yanzhengma_list:"/api/SMSCode/GetCode",
     // 验证用户是否可用
     yonghu_list:"/api/Verify/LoginName",
     // 添加登录信息
     dlxinxi_list:"/api/LoginPage/AddLogin",
     // 测试登录
     denglu_list:"/api/login"
}

module.exports = api

2、在utils文件夹里面创建一个文件

在reques.js文件里面写入

import axios from 'axios'
import store from '@/store'
import { Toast } from 'vant'
// 根据环境不同引入不同api地址
// import { baseApi } from '@/config'
const baseApi = 'http://www.hj0819.top:44369' 
// create an axios instance
const service = axios.create({
  baseURL: baseApi, // url = base api url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request拦截器 request interceptor
service.interceptors.request.use(
  config => {
    // 不传递默认开启loading
    if (!config.hideloading) {
      // loading
      Toast.loading({
        forbidClick: true
      })
    }
    if (store.getters.token) {
      config.headers['X-Token'] = ''
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// respone拦截器
service.interceptors.response.use(
  response => {
    Toast.clear()
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    Toast.clear()
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

第三步
1、在每个需要导入数据的组件中导入

import {
  getzhuce_list,
  getyanzhengma_list,
  getyonghu_list,
  postdlxinxi_list,
  getdenglu_list,
} from "../api/api";

2、获取数据

// 发送验证码
    yanzm() {
      // 注册手机号是否被注册
      getzhuce_list({
        phone: this.sjhvalue,
      }).then((res) => {
        console.log(res, "手机号是否可用");
      });

      // 短信验证码
      getyanzhengma_list({
        phone: this.sjhvalue,
        codeType: 0,
      }).then((res) => {
        console.log(res.msg, "短信验证码");
      });
    },