详解axios在vue中的简单配置与使用

2024-09-29 00:20:13

一、axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

二、引入方式：

npm:

$ npm install axios
//淘宝源
$ cnpm install axios

bower:

$ bower install axios

cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、vue中axios的配置

之前那个开源项目一开始就打算用axios，在网上找了好多文章与攻略，发现好多都不太详细，所以打算自己动手配置一个，(不要怂，撸起袖子就是干)。

我的配置：

import axios from 'axios'
import qs from 'qs'
import * as _ from '../util/tool'
axios.defaults.timeout = 5000;            //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';      //配置请求头
axios.defaults.baseURL = '你的接口地址';  //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
 //在发送请求之前做某件事
  if(config.method === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
   _.toast("错误的传参", 'fail');
  return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
 //对响应数据做些事
  if(!res.data.success){
    // _.toast(res.data.msg);
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  _.toast("网络异常", 'fail');
  return Promise.reject(error);
});
//返回一个Promise(发送post请求)
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}

四、vue中使用配置好的axios

export default {
  /**
   * 用户登录
   */
  Login(params) {
    return fetch('/users/api/userLogin', params)
  },
  /**
   * 用户注册
   */
  Regist(params) {
    return fetch('/users/api/userRegist', params)
  },
  /**
   * 发送注册验证码
   */
  RegistVerifiCode(tellphone) {
    return fetch('/users/api/registVerifiCode', {tellphone: tellphone})
  },
  ......
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js教程之axios与网络传输的学习实践

前言在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了.就学习尤大推荐的axios了.刚好本人对网络请求这块除了会get.put.post和delete这四个方法之外知之甚少,刚好补全上. 注意:Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios. 为何放弃vue-resource? 尤大的原话: 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.super
详细讲解vue2+vuex+axios

在vue2项目中,组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下(后台获取数据存入vuex,组件之间共享数据),那么就需要用vuex来管理这些. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios,然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上首先新需要在项目中安装vuex: 运行命令:npm install vuex --save-dev 在项目的
Vue.js实战之使用Vuex + axios发送请求详解

前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma
vue axios用法教程详解

axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1. Vue.prototype.$ajax=axio
Vue+axios 实现http拦截及路由拦截实例

现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的文档已经有很多了,我就不再累述了. 技术栈 vue2.0 vue-router axios 拦截器首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多. 这个项目我引入了element ui框架,所以我是结合element中loading和me
详解axios在vue中的简单配置与使用

一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 Promise API 拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF 二.引入方式: npm: $ npm install axios //淘宝源 $ cnpm install axios bower: $ bowe
详解如何在Vue中动态添加类名

目录静态和动态类有条件的类名使用数组语法使用对象语法与自定义组件一起使用快速生成类名使用计算属性来简化类能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:
详解Kotlin Android开发中的环境配置

详解Kotlin Android开发中的环境配置在Android Studio上面进行安装插件在Settings ->Plugins ->Browse repositores.. ->kotlin 安装完成后重启Android Studio就生效了如图所示: 在Android Studio中做Kotlin相关配置 (1)在根目录的build.gradle中进行配置使用,代码如下: buildscript { ext.kotlin_version = '1.1.2-4' repos
详解eslint在vue中如何使用

目录 1.说明 2.下载相关依赖包 3.配置文件.eslintrc.js(还有其他方式配置规则) 4.在vscode(版本1.44.0)配置保存时自动格式化代码 5.在package.json添加scripts命令:eslint 检测并自动修复 6.项目关闭eslint验证 7.eslint 中文文档总结 1.说明 eslint帮助我们检查代码的是否规范,本文使用Prettier规则(还有standardjs.airbnb等规则),如果你想用eslint默认规则或者自行定义规则,可以不下载pr
详解vue-loader在项目中是如何配置的

什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角--vue-loader,你对它了解多少? 这是我今天的回答,确实,vue-loader是webpack的一个loader,用于处理.vue文件. .vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件.每个 .vue 文件包含三种类型的顶级语言块 <template>.<script>和 <style>. vue-loader 会解析文件,提取每个
详解如何在vue中使用sass

创建一个基于 webpack 模板的新项目全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 安装依赖 $ cd my-project $ npm install 为了使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install
详解ESLint在Vue中的使用小结

ESLint是一个QA工具,用来避免低级错误和统一代码的风格 ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格: 2.审查代码是否存在语法错误: 中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用在初始化项目时选择是否使用 ESLint管理代码(选择Y则默认开启) Use ESLint to lint your code? (Y/n) 默认使用的是此标准https://github.com/standard/standard/blob/m
详解swiper在vue中的应用(以3.0为例）

一.使用方法官网地址参考此文章(点击我) 二.常见情况图片需要动态获取时待数据加载成功且渲染完毕后,进行节点初始化.例: axios.post('接口地址', 参数).then(response => { this.pages = response.data; //pages 渲染数据的数组 this.$nextTick(() => { //渲染结束 // mySwiper 里面的属性按需配置,详情见官网 let mySwiper = new Swiper(".swiper-
Vue中使用vux配置代码详解

一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目二.想在已创建的Vue工程里引入vux组件 <1>. 在项目里安装
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）

•基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 •vue2.0之后,就不再对 vue-resource 更新,而是推荐使用 axios,本项目也是使用 axios •功能特性 •在浏览器中发送 XMLHttpRequests 请求 •在 node.js 中发送 http请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换 JSON 数据 •客户端支持保护安全免受 CSRF/XSRF(跨站请求伪造) 攻击

详解axios在vue中的简单配置与使用

相关推荐

随机推荐