axios简单封装

Posted 2021-03-20 casf

 

1 ：api接口

 

import request from ‘../utils/http‘

// 使用qs库对post提交的数据进行格式化 ---- > qs需要安装   npm install qs --save
import qs from ‘qs‘;

// get 模板
export function getJsonData(params) {
    return request({
      url: ‘‘,
      method: ‘get‘,
      params
    })
  }

// 模拟错误请求数据
export function getErrJsonData(params) {
  return request({
    url: ‘http://localhost:8080/data1.json‘,
    method: ‘get‘,
    params
  })
}

// post模板
export function addDataToStu(params) {
    return request({
      url: ‘‘,
      method: ‘post‘,
      // post请求的对象参数
      data: qs.stringify(params)
    })
  }
  

2：http  axios的简单封装

// axios简单的封装

// import axios from ‘axios‘
import axios from ‘./request‘

// 设置请求的baseUrl----基准请求路径
// let baseURL = "http://localhost:8080"
let baseURL = ‘‘

let ajax = function(config) {

    config.url = baseURL + config.url

    return new Promise((resolve, reject)=>{

        var options = {
            method: config.method,
            headers: {
                ‘Content-Type‘: ‘application/x-www-form-urlencoded‘,
                // ‘Accept‘: ‘application/json‘,
                // ‘Content-Type‘: ‘application/json‘,
            },
　　　　　　　//body:config.data   //get 请求
            data: config.data　　//post 请求
        }

        axios(config.url, options).then((res) => {
            resolve(res)
        })
    })
}

export default ajax;

3：request http配置

/**
 * Created by superman on 17/2/16.
 * http配置
 */
import axios from ‘axios‘
import router from ‘../router‘

// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = ‘‘

// http request 拦截器
axios.interceptors.request.use(
  config => {
    // config.headers.Authorization = `token ${store.state.token}`
    console.log(config, ‘+++++++++++++++++++----------------‘)
    return config
  },
  err => {
    return Promise.reject(err)
  },
)

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    console.log(error.response, ‘===================‘)
    if (error.response) {
　　　　//根据自己实际情况执行不同的状态
      switch (error.response.status) {
        case 404:
          // 404 清除token信息并跳转到登录页面
          localStorage.removeItem(‘username‘);
          
          // 只有在当前路由不是登录页面才跳转
          router.currentRoute.path !== ‘login‘ &&
          router.replace({
            path: ‘login‘,
            // query: { redirect: router.currentRoute.path },
          })
      }
    }
    // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
    return Promise.reject(error.response.data)
  },
)

export default axios