一、文档链接

axios文档
vue开发插件

二、axios 简介

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

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

三、Vue项目中使用axios（方式一）—— 开发插件

注意：axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定：

1. 安装axios

npm install axios

2. 新建 src/plugins/http.js

import axios from 'axios'
const MyHttpServer = {}
MyHttpServer.install = (Vue) => {// 配置接口基准地址axios.defaults.baseURL = 'http://47.***.***.7:8888/api/private/v1/'// 添加请求拦截器axios.interceptors.request.use(function (config) {if (config.url !== 'login') {const AUTH_TOKEN = sessionStorage.getItem('token')config.headers.common['Authorization'] = AUTH_TOKEN}return config}, function (error) {return Promise.reject(error)})Vue.prototype.$http = axios
}
export default MyHttpServer

代码梳理：

① .install

根据vue开发插件的文档，
Vue.use方法会寻找插件上的install方法，并且执行，如果插件没有install方法的话，就会报错，无法使用use来注册插件。因此，Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑...}

②拦截器

这里为什么要写拦截器？是根据接口文档中“除了登录请求以外，任意请求都必须在请求头中使用 Authorization 字段提供 token 令牌”，查询axios文档 axios拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});

请求配置参数config
这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。{// `url` 是用于请求的服务器 URLurl: '/user',// `method` 是创建请求时使用的方法method: 'get', // default// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URLbaseURL: 'https://some-domain.com/api/',// `headers` 是即将被发送的自定义请求头headers: {'X-Requested-With': 'XMLHttpRequest'},// `params` 是即将与请求一起发送的 URL 参数// 必须是一个无格式对象(plain object)或 URLSearchParams 对象params: {ID: 12345},// `data` 是作为请求主体被发送的数据// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'// 在没有设置 `transformRequest` 时，必须是以下类型之一：// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// - 浏览器专属：FormData, File, Blob// - Node 专属： Streamdata: {firstName: 'Fred'},

③路由-导航守卫

先上官方文档导航守卫

router.beforeEach((to, from, next) => {// 如果用户访问的是 登录页面，则直接放行if (to.path === '/login') return next()// 获取 tokenconst tokenStr = sessionStorage.getItem('token')// 如果 token 存在， 直接放行if (tokenStr) return next()// 否则，强制跳转到登录页next('/login')
})

每个守卫方法接收三个参数：
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。

④将axios绑定到vue原型上

Vue.prototype.$http = axios

⑤导出对象

export default MyHttpServer

⑥导入、使用

> 在main.js中（导入）
import http from '@/plugins/http.js'> 在.vue单文件组件中（使用）
this.$http.post('login', this.formdata)
Vue.use(http) -- 既然自定义了插件就要Vue.use()

引入模块可能有一个export default（无论它是对象，函数，类等）可用。然后可以使用import语句来导入这样的默认接口。

最简单的用法是直接导入默认值：
为了解决导出命名冲突的问题，ES6为你提供了重命名的方法解决这个问题。
import 后面是一个别名，可以和export default导出的名字不同。
待补充

四、Vue项目中使用axios（方式二）—— 使用vue-axios

vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装
`在mian.js中引用axios，vue-axios，通过全局方法 Vue.use() 使用插件，就相当于调用install方法：

npm install --save axios vue-axios  --【安装】import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

用法：

Vue学习笔记（二）—— vue项目中使用axios相关推荐

少侠请重新来过 - Vue学习笔记(二) - Vue生命周期
Vue 生命周期和钩子每一个vue实例创建时,会经历一段初始化的过程,同时会调用其生命周期钩子,实例的钩子this指向它的Vue实例,不需要在钩子用箭头函数. <template>< ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
webpack入门学习笔记10 —— 在项目中使用图片资源
1. 写在前面在前端项目中,图片是必不可少的一种资源.在使用图片的时候,我们可以有以下几种方式: 在 .html 文件中,通过 <img src="" alt=" ...
Vue学习笔记7 - 在Vscode中配置Vetur，ESlint，Prettier
俗话说得好,工欲善其事必先利其器,想要熟练开发Vue项目,一个好的开发环境就是必不可少了,这里我就选用了vscode作为开发工具,毕竟vscode免费,还跨平台,应用范围也广,著名的vue开源项目:后 ...
阿瑶的vue学习笔记(1)Vue核心
1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者:尤雨溪 1.1.3. Vue的特点遵 ...
Vue学习笔记(九) Vue CLI
1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它包括三个独立的部分: CLI:一个全局安装的 npm 包,提供在终端里使用的命令 CLI 服务:一个局部安装在使用了 @v ...
Java学习笔记二十:Java中的内部类
Java中的内部类一:什么是内部类: (1).什么是内部类呢? 内部类( Inner Class )就是定义在另外一个类里面的类.与之对应,包含内部类的类被称为外部类. (2).那为什么要将一个类定 ...
Numpy学习笔记(二):argmax参数中axis=0,axis=1,axis=-1详解附代码
文章目录 1.argmax和max函数区别 2.axis=0/axis=1/axis=-1的区别 3.具体代码分析 ---3.1一维数组 ---3.2二维数组 ---3.3三维数组 1.argmax和 ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...

Vue学习笔记（二）—— vue项目中使用axios

一、文档链接

二、axios 简介

三、Vue项目中使用axios（方式一）—— 开发插件

1. 安装axios

2. 新建 src/plugins/http.js

代码梳理：

① .install

②拦截器

③路由-导航守卫

④将axios绑定到vue原型上

⑤导出对象

⑥导入、使用

四、Vue项目中使用axios（方式二）—— 使用vue-axios

Vue学习笔记（二）—— vue项目中使用axios相关推荐

最新文章

热门文章