vue 封装数据请求

Posted 2023-03-02

参考技术A npm install axios --save

npm install qs

import 'amfe-flexible'

import store from './store/store.js'

// 在http.js中引入axios

import axios from 'axios'; // 引入axios

import Message from "element-ui";

import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到

import store from '../store/store'

import base from './base'

import bus from './api'

// 通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

// post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

const instance = axios.create(

  baseURL: base.sq,

  timeout: 1000,

  headers: 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'

);

// 请求拦截器

// 每次发送请求之前判断vuex中是否存在token

// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况

// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

instance .interceptors.request.use(

  config =>

    const token = sessionStorage.getItem("token");

    token && (config.headers.Authorization = token);

    // const token = store.state.token;

    // console.log(store.state.token)

    // token && (config.headers.Authorization = token);

    store.state.loading = true;

    return config;

  ,

  error =>

    console.log('请求超时，请稍后重试！')

    return Promise.error(error);

 

);

// 添加一个响应拦截器

instance .interceptors.response.use(

  // 请求成功

  res =>

    store.state.loading = false;

    // 返回的状态码

    // console.log(res.data , res.data.status)

    if (res.data && res.data.status)

      if (parseInt(res.data.status) === 401)

        //未登录

        Message(

          showClose: true,

          message: "请登录...",

          type: "error",

          duration: 2000

        );

        setTimeout(function()

          bus.$emit('goto', '/login')

        ,2000);

      else if (parseInt(res.data.status) === 402)

        Message(

          showClose: true,

          message: res.data.err,

          type: "error",

          duration: 2000

        );

     

   

    return res;

    // res.status === 200 ? Promise.resolve(res) : Promise.reject(res),

  ,

  // 请求失败

  error =>

    const

      response

    = error;

    if (response)

      // 请求已发出，但是不在2xx的范围

      if (error.response.status == '400' || error.response.status == '404')

        Message(

          showClose: true,

          message: "请求方式出错",

          type: "error",

          duration: 2000

        );

      else if (error.response.status == '403')

        Message(

          showClose: true,

          message: '您没有此权限',

          type: "error",

          duration: 2000

        );

      else if (error.response.status == '402')

        Message(

          showClose: true,

          message: '登录失败，请检查账号密码！',

          type: "error",

          duration: 2000

        );

       

      store.state.loading = false

      // Do something with response error

      return Promise.reject(error);

    else

      // 处理断网的情况

      // eg:请求超时或断网时，更新state的network状态

      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明

      Message(

        showClose: true,

        message: '断网了,请检查网络链接',

        type: "error",

        duration: 2000

      );

   

 

);

/**

* 封装get方法

* @param url

* @param params

* @returns Promise

*/

export function get(url, params)

  return new Promise((resolve, reject) =>

    instance.axios.get(`$url`,

        params: params

      )

      .then(res =>

        resolve(res);

      )

      .catch(err =>

        reject(err)

      )

  )



/**

* 封装post请求

* @param url

* @param params

* @returns Promise

*/

export function post(url, params)

  return new Promise((resolve, reject) =>

    instance.axios.post(`$url`, QS.stringify(params))

      .then(res =>

        resolve(res);

      , err =>

        reject(err)

      )

  )



/**

* 封装patch请求

* @param url

* @param params

* @returns Promise

*/

export function patch(url, params)

  return new Promise((resolve, reject) =>

    instance.axios.patch(`$url`, QS.stringify(params))

      .then(res =>

        resolve(res);

      , err =>

        reject(err)

      )

  )



/**

* 封装put请求

* @param url

* @param params

* @returns Promise

*/

export function put(url, params)

  return new Promise((resolve, reject) =>

    instance.axios.put(`$url`, QS.stringify(params))

      .then(res =>

        resolve(res);

      , err =>

        reject(err)

      )

  )



import Vue from 'vue'

import axios from 'axios'

import get,post,fetch,patch,put from './http'

//定义全局变量

Vue.prototype.$get=get;

Vue.prototype.$post=post;

Vue.prototype.$patch=patch;

Vue.prototype.$put=put;

/**

* api接口统一管理

*/

// 获取token跳转页面

export const bus = new Vue();

//bus是判断无token情况下请求数据，会跳转登录页面方法在http.js下面的$emit，$on设置在index.vue或者app.vue里面都可以

//$on

created()

    bus.$on('goto', (url) =>

      if (url === "/login")

        sessionStorage.removeItem('token');

     

      this.$router.push(url);

    )

  ,

// get

export const tTable = data => get('/table', data);

// post

export const Terrar = data => post('/errar', data);

/**

* 接口域名的管理

*/

const base =

  sq: 'https://www.xxxxx.com/api ',



export default base