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

目录
  • 安装：
  • 较科学的封装好的axios：（new-axios.js）
  • main.js 引入，添加到vue原型
  • 使用
  • 以下步骤一般不需要
  • 总结

前提条件：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教程内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中axios封装使用的完整教程

    前言 如今,在项目中,普遍采用Axios库进行Http接口请求.它是基于promise的http库,可运行在浏览器端和node.js中.此外还有拦截请求和响应.转换JSON数据.客户端防御XSRF等优秀的特性. 考虑到各个项目实际使用时写法混乱,不统一.对Axios进行一下通用化的封装,目的是帮助简化代码和利于后期的更新维护,尽量通用化. 方法如下 1. vue安装axios npm install axios -S 或者 npm i axios -S 2. 在main.js进行全局引入 imp

  • vue使用Axios做ajax请求详解

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • vue 里面使用axios 和封装的示例代码

    vue官方推荐使用 axios发送请求 首先上需求 1.需要封装全局调用 2.返回一个promise对象 3.错误全局统一处理 4.除了登录界面token带入头部 5.登录时候把用户信息自动存到vuex里面 首先上封装代码 /** * User: sheyude * Date: 2017/8/23 0023 * Time: 下午 13:15 * */ import axios from 'axios'; // 导入配置文件 配置文件就导入的请求的前缀地址 import {defaults} fr

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

    目录 安装: 较科学的封装好的axios:(new-axios.js) main.js 引入,添加到vue原型 使用 以下步骤一般不需要 总结 前提条件: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 '@/

  • vue中封装axios并实现api接口的统一管理

    在vue项目中,我们通常都是使用axios与后台进行数据交互,axios有很多好用的特性,这里不多做介绍,相关细节可以查阅axios中文网.在对axios进行封装之前,我们要使用vue脚手架工具创建一个vue项目(这里我用的是cli4). 安装 cnpm install axios --save-dev; // 安装axios cnpm install qs --save-dev; // 安装qs模块,用来序列化post类型的数据,否则后端无法接收到数据 模块引入 在src目录下创建一个serv

  • vue中使用Axios最佳实践方式

    目录 1.前言 2.使用 2.1安装 2.2基本用例 2.2.1 get请求 2.2.2post请求 3.配置 3.1语法 3.2别名 4.Axios实例 4.1语法 4.2请求配置 4.3响应的配置 配置的优先级 5.拦截器 6.错误拦截 7.取消请求 8.完整封装 建立http.ts文件编写clas Http类 9.总结 1.前言 最近在写vue3的项目,需要重新搭建脚手架并且使用网络请求接口,对于js的网络请求接口的一般有几种常用的方式: fetch XMLHttpRequests aja

  • vue中mint-ui环境搭建详细介绍

     vue中mint-ui环境搭建详细介绍 首先需要如下配置node (最好用淘宝源) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 以及git 从官方github拉下来mint-ui git clone https://github.com/ElemeFE/mint-ui.git 进入mint-ui npm run dev 全程大概5-10分钟,出现 Build completed in 34.926s Chil

  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q

  • vue+axios实现文件下载及vue中使用axios的实例

    功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 以及返回了文件流. 第二步:修改axios请求的responseType为blob,以post请求为例: axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response =>

  • 在Vue中使用axios请求拦截的实现方法

    在Vue中使用axios请求拦截的实现方法

    一.前言 axios的基础使用就不过多的讲解啦,如何使用可以看axios文档使用说明·Axios中文说明 在这里和大家分享一下axios拦截在实际项目中的使用 很多人都看过axios的官方文档中拦截器这一栏,有的人可能会有点懵,因为文档只告诉你有这个东西,而不告诉你在什么情况下使用.很多初学者就会放弃使用axios拦截器,毕竟拦截器是可以不使用的,但是使用拦截器,会在页面中减少很多不必要的代码. 二.说在前面的 项目使用的ui框架是iview 以下友好提示均使用iview ui的message提

  • 解决vue中使用Axios调用接口时出现的ie数据处理问题

    1.问题 近期在使用vue2 + axios 调用接口时碰到一个IE中很奇葩的问题,让我头痛了很久. 废话不多扯,就是在其他浏览器中调用接口返回数据然后可以很顺利的进行处理,但在IE(9-11)中发现发送请求是成功的而且也能抓到服务端返回来的数据.却发现在处理返回来的数据的时候处理的有点问题,怎么搞就是不行. 2.处理过程及方法 我使用了console大法去解决这个问题,具体是这样的:我先将服务器返回过来的数据打印到浏览器控制台,结果发现都能打印出来,这个时候就郁闷了,明明有数据为何在IE上还是

  • vue axios数据请求及vue中使用axios的方法

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: -------------------------------------------------------------------------------- •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支

  • 解决在Vue中使用axios用form表单出现的问题

    vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式 一,应用/ X WWW的窗体-urlencoded 这应该是最常见的后编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以用$ _ POST ["钥匙"]的方式获取到关键的值,在节点中我们可以使用查询字符串中间件对参数进行分离 app.post("/server&q

随机推荐