zoukankan      html  css  js  c++  java
  • vue封装axios

    记得要安装axios 哦,npm install axios vue-axios  -S 

    然后再main.js中全局使用 

    import axios from './utils/axios';
    import VueAxios from 'vue-axios';

    //axios,VueAxios的引入
    Vue.use(VueAxios, axios);

    先分了两个步骤:

    1、抽取出来的config文件中就是生成环境以及开发环境的地址

    // 开发环境地址
    const devUrl = '/api/'
    
    //生产环境地址
    // const productionUrl = 'http://115.233.221.136/:81/hy_comm_api/'
    const productionUrl = 'http://localhost:8080/api/'
    const httpUrl = {
      development: devUrl,
      production: productionUrl
    }
    
    const config = {
      baseUrl: httpUrl[process.env.NODE_ENV]
    }
    
    export default config
    

      2、主要的是axios的响应跟请求的封装了

    import axios from 'axios'
    import Config from './config'
    // import { Message } from 'element-ui'
    
    const service = axios.create({
      baseURL: Config.baseUrl,
      timeout: 60000
    })
    
    service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
    
    // request拦截器
    service.interceptors.request.use(
      config => {
        
        return config
      },
      error => {
        Promise.resolve(error)
      }
    )
    
    // respone拦截器
    service.interceptors.response.use(
      response => {
        if (response.data.errorcode != 200) {
          console.log(response.config.url)
        }
        return response.data.data
      },
      error => {
        // do something 拦截响应
        return Promise.reject(error)
      }
    )
    
    export default service
    

     

  • 相关阅读:
    js_Array类型_find和findIndex
    js_正则表达式专项
    html5_音视频元素_audio&video
    html5_延迟(defer)脚本与异步(async)脚本
    html5_头部七元素_base元素
    html5_头部七元素_link元素
    html5_头部七元素_meta元素
    css_@media
    js_事件类型——鼠标点击事件
    puppeteer headless
  • 原文地址:https://www.cnblogs.com/easyjie/p/15571177.html
Copyright © 2011-2022 走看看