美文网首页
Vue添加请求拦截器,配置后台接口方式

Vue添加请求拦截器,配置后台接口方式

作者: 怪兽别跑biubiubi | 来源:发表于2019-10-18 14:53 被阅读0次

    一、安装axios、qs。

    npm i axios --save-dev
    npm i qs --save-dev
    

    二、配置axios

    在src下新建config文件夹。并新建js文件。
    MT.js

    // 引入axios、qs
    const axios = require('axios')
    const qs = require('qs')
    // 异步请求设置,允许跨域
    axios.defaults.withCredentials = true
    // 配置默认的host(如果有其他地方需要用到host,可以新建一个js文件直接 export { baseUrl })
    let baseUrl = 'https://www.baidu.com'
    const service = axios.create({})
    // 添加请求拦截器
    service.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      return config
    }, function (error) {
      // 对请求错误做些什么
           Promise.reject(error)
    });
    
    // 添加响应拦截器
    service.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error)
    });
    // 配置接口请求方式
    export const LYD = {
      POST(url, params, type) {
        if (type === 'json') {
          return service.post(baseUrl + url, params)
        } else {
          return service.post(baseUrl + url, qs.stringify(params), {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            }
          })
        }
      },
      GET(url, params) {
        if (params) {
          return service.get(baseUrl + url + '/?' + qs.stringify(params), {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            }
          })
        } else {
          return service.get(baseUrl + url + '/', {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            }
          })
        }
      }
    }
    

    配置完成后,在src下新建service文件夹,新建index.js文件

    import { LYD } from '../config/LYD'
    
    // 调用接口---例如:
    export const jiekou1 = params => LYD.POST("/def/post/jiekou1", params)
    export const jiekou2 = params => LYD.GET("/def/get/jiekou2", params)
    

    接下来就是如何使用了。
    在页面引入需要用到的接口方法名。例如上面是jiekou1 、jiekou2

    import { jiekou1, jiekou2 } from '@/service'
    // 在mounted里直接调用
    mounted () {
        // 调用接口
        jiekou1({
          id: 1
        }).then(res => {
          console.log(res)
        })
        jiekou2 ({
          type: 1
        }).then(res => {
          console.log(res)
        })
      }
    

    这样一个接口的基本配置就完成了。demo地址:https://github.com/leiyunduo/Vue-Element-UI

    相关文章

      网友评论

          本文标题:Vue添加请求拦截器,配置后台接口方式

          本文链接:https://www.haomeiwen.com/subject/htkimctx.html