可能是vue中使用axios最详细教程

 更新时间:2022年08月15日 10:05:29   作者:醉梦者  
Axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,下面这篇文章主要给大家介绍了关于vue中使用axios最详细教程的相关资料,需要的朋友可以参考下

前提条件:vue-cli 项目

安装:

npm axios from 'axios'

较科学的封装好的axios:(new-axios.js)

import axios from 'axios'
import { Notify } from 'vant';
// import Vue from 'vue'
// import store from '@/store'  // 我此项目没有用到vuex,所以vuex代码的都注释了,需要的自己打开使用

// import {ACCESS_TOKEN} from '@/store/mutation-types'

// 创建 axios 实例
const requests = axios.create({
  baseURL: process.env.VUE_APP_API, // 基础url,如果是多环境配置这样写,也可以像下面一行的写死。
  // baseURL: 'http://168.192.0.123',
  timeout: 6000 // 请求超时时间
})

 
// 错误处理函数
const err = (error) => {
  if (error.response) {
    const data = error.response.data
    // const token = Vue.ls.get(ACCESS_TOKEN)
    if (error.response.status === 403) {
        Notify({ type: 'danger', message: data.message||data.msg });
    }
    if (error.response.status === 401) {
        Notify({ type: 'danger', message: '你没有权限。' });
      // if (token) {
      //   store.dispatch('Logout').then(() => {
      //     setTimeout(() => {
      //       window.location.reload()
      //     }, 1500)
      //   })
      // }
    }
  }
  return Promise.reject(error)
}

// request interceptor(请求拦截器)
requests.interceptors.request.use(config => {
//   const token = Vue.ls.get(ACCESS_TOKEN)
  const token = localStorage.getItem('token')
  if (token) {
    config.headers['token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  return config
}, err)

// response interceptor(接收拦截器)
requests.interceptors.response.use((response) => {
  const res = response.data
  if (res.code !== 0&&res.code!==200) { 
    Notify({ type: 'danger', message: res.message||res.msg });
    // 401:未登录;
    if (res.code === 401||res.code === 403||res.code===999) {
      Notify({ type: 'danger', message: '请登录'});
    }
    return Promise.reject('error')
  } else {
    return res
  }
}, err)

export default {
  requests
}

main.js 引入,添加到vue原型

import requests from '@s/basejs/new-axios.js'   // 记得改为你的路径
Vue.prototype.rq = requests  // 此处命名为rq,你可以改

使用

this.rq.get('/api/product/get?productChannelId='+this.productChannelId).then(res=>{
    console.log(res)
})

// 传对象参数
// get请求记得加params
this.rq.get('/api/product/get,{params:{name:'abc'}}).then(res=>{
    console.log(res)
})

this.rq.post('/api/product/get,{name:'abc'}).then(res=>{
    console.log(res)
})

以下步骤一般不需要

开发环境如果要跨域,解决跨域问题(设置代理):vue-cli 3.0的在 package.json  同级目录新建一个 vue.config.js 文件,加入下面代码,其他版本找到配置文件的devServer加入代码

module.exports = {
    //axios域代理,解决axios跨域问题
    baseUrl: '/',
    devServer: {
        proxy: {
            '': {
                target: 'http://192.168.0.108:8090',
                changeOrigin: true,
                ws: true,
                pathRewrite: {

                }
            }
        }
    }
}

修改完后记得重启项目应用配置

总结

到此这篇关于vue中使用axios最详细教程的文章就介绍到这了,更多相关vue使用axios教程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Vue 全局变量,局部变量

    详解Vue 全局变量,局部变量

    这篇文章主要介绍了Vue全局变量局部变量,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue组件设计-滚动置顶设计案例

    Vue组件设计-滚动置顶设计案例

    这篇文章主要介绍了Vue组件设计-滚动置顶设计案例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    vue2.0 + element UI 中 el-table 数据导出Excel的方法

    下面小编就为大家分享一篇vue2.0 + element UI 中 el-table 数据导出Excel的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 如何去掉ElementUI Table的hover变色问题

    如何去掉ElementUI Table的hover变色问题

    这篇文章主要介绍了如何去掉ElementUI Table的hover变色问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue项目中使用axios遇到的相对路径和绝对路径问题

    vue项目中使用axios遇到的相对路径和绝对路径问题

    这篇文章主要介绍了vue项目中使用axios遇到的相对路径和绝对路径问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue代理和跨域问题的解决

    vue代理和跨域问题的解决

    这篇文章主要介绍了vue代理和跨域问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue3警告:Failed to resolve component:XXX的详细解决办法

    Vue3警告:Failed to resolve component:XXX的详细解决办法

    最近在一个vue3项目中遇到了报错,整理了些解决办法,这篇文章主要给大家介绍了关于Vue3警告:Failed to resolve component:XXX的详细解决办法,文中介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue大型项目之分模块运行/打包的实现

    vue大型项目之分模块运行/打包的实现

    这篇文章主要介绍了vue大型项目之分模块运行/打包的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Element UI框架中巧用树选择器的实现

    Element UI框架中巧用树选择器的实现

    这篇文章主要介绍了Element UI框架中巧用树选择器的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue3如何将通用组件注册成全局组件

    vue3如何将通用组件注册成全局组件

    这篇文章主要介绍了vue3将通用组件注册成全局组件的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08

最新评论