axios封装

首先在src下面新建一个utils的文件夹,在这个文件夹新建一个http.js文件 然后

http.js


import axios from 'axios'
// import qs from 'qs'
import { MessageBox, Message } from 'element-ui'
// const url = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : ''
const http = axios.create({
    // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    // baseURL: "/api", 
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000, // request timeout
  })
 function getToken(){
    return window.localStorage.getItem('token')
 }
  // 请求拦截器 这块拦截器配置请求头的
  //有token, 请求形式 目前设置的是json传参 注释的部分是表单传参
//   和表单传参的转换 不设置会有问题 目前的项目你还没遇到过 你这快说的是哪里?下面不是存储token吗
//
  http.interceptors.request.use(
    config => {
      // 在发送请求之前先做点事
  
      if (getToken()) {
        // 让每个请求都携带令牌
        // ['X-Token']是自定义标头键
        // 请根据实际情况进行修改
        config.headers['Authorization'] = getToken()
      }

  //这里params 方法解构出来了 这样get post传参方式一样的写了
      // config.method === 'post' && config.data.constructor !== FormData || config.method === 'put'
      //     ? config.data = qs.stringify({...config.data})
      //     : config.params = {...config.params};
//   设置json传参
      config.headers['Accept'] = 'application/json'
      config.headers['Content-Type'] = 'application/json'
      //表单传参
      // config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
      return config
    },
    error => {
        //报错处理 Promise方式处理
      // do something with request error
    //   console.log(error) // for debug
      return Promise.reject(error)
    }
  )

  // 响应拦截器2部分 数据的处理
axios.interceptors.response.use(    
    response => {   
        //以前你公司的接口有传code 这边的接口没有判断请求正确用浏览器的状态码 status
        const res = response.data
        const code = response.status  //200就是请求成功
        res.code = code
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
        // 否则的话抛出错误
        // 配置统一格式传输
        let success={
            code:code,
            data:res,
            message:res.data.messge
        }
        if (code == 200) {   
            //.then()里面的数据         
            return Promise.resolve(success);        
        } else {   
            //.catch()里面的数据         
            return Promise.reject(res);        
        }    
    },    
    // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    // 下面列举几个常见的操作，其他需求可自行扩展
    //非请求成成功的部分 不是200 201 这种2开头的
    error => {  
        //拦截器 拦截所有请求 统一处理错误          
        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;

                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                    this.$message.error('登录过期，请重新登录');
                    
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 

                // 404请求不存在
                case 404:
                    this.$message.error('网络请求不存在');
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    this.$message.error('error.response.data.message');
                   
            }
            //500 505也可以在这里处理 
            // 但是一般写在路由里面了 5开头的是程序错误
            return Promise.reject(error.response);
        }
    }  
);

export default http

在src下面创建一个api的文件夹 然后里面新建一个js文件,例如 env.js

import http from '@/utils/http'
const url = '/data/list'
  /* 新增 */
  export function addData(data) {
      return http({
          url: url,
          method: 'post',
          data
      })
  }
  /* 删除 */
  export function deleteData(id) {
      return http({
          url: `${url}/${id}`,
          method: 'delete',
      })
  }
  /* 更新 */
  export function updateData(data) {
      return http({
          url: `${url}/${data.id}`,
          method: 'put',
          data
      })
  }
  /* 详情 */
  export function getDataDetail({grade,category}) {
      return http({
          url: `${url}/${grade}/${category}`,
          method: 'get'
      })
  }
  /* 条件查询所有记录 */
  export function getAllDatas(params) {
      return http({
          url: `${url}`,
          method: 'get',
          params
      })
  }
  /* 搜索 */
  
  const url1 = '/data/search'
  export function searchDataWord(params) {
    return http({
        url: `${url1}/${params.src}`,
        method: 'get',
    })
}
  export function searchData(params) {
    return http({
        url: `${url1}`,
        method: 'get',
        params
    })
}
  
  
const url1 = '/users/regis/'
// data={ username:'lalal', mobile:'15830017765', password:'12345678', password2:'12345678' }
// 传过来就是这样数据
export function PostRegis(data) {
    
    return http({ 
              url: `${url1}`, 
              method: 'post',
              data
    })

}