vue整合axios 未完

一、简介

1、介绍

  • axios前端异步请求库类似jouery ajax技术,
  • axios用来在前端页面发起一个异步请求,请求之后页面不动,响应回来刷新页面局部;
  • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

2、特性:

  • 从浏览器中创建XLHttpRequests从node.js 创建http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据取消请求
  • 自动转换JSON数据,客户端支持防御XSRF

二、引用步骤

1、安装

bash 复制代码
cnpm i axios --save

2、全局引用

javascript 复制代码
//在main.js里面引用
...
import axios from 'axios'
...
Vue.prototype.axios = axios;
 
new Vue({
    axios,
    router,
    store,
    render:h=>h(App)
}).$mount('#app'

三、基本使用

1、异步请求之GET方式(查询)

javascript 复制代码
axios.get("http://localhost:8081/demo?id=21&name=xiaowang ").then( function(res){
    //代表请求成功之后处理
	console.log(res);
	console.1og (res.data);
}).catch( function (err){
    //代表请求失败之后处理
	alert ('进入catch ')
	console.log (err);
});

2、发送异步请求之POST方式(添加)

javascript 复制代码
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3、其他方式的请求

javascript 复制代码
axios.put(.then( ).catch ( ); //修改
axios.patch( ).then( ).catch( );
axios.delete( "ur1?id=21").then ( ).catch ( ); //删除

4、axios创建默认实例发送请求

javascript 复制代码
//创建axios的配置对象
var instance = axios. create({
	baseURL: 'http://localhost:8081/',
    timeout: 5000,
});

instance.get("/demo?id=21&name=xiaowang ").then( function(res) {
    //代表请求成功之后处理
	console.log(res);
	console.1og (res.data);
}).catch( function (err) {
    //代表请求失败之后处理
	alert ('进入catch ');
	console.log (err);
});

5、axios拦截器(interceptor)

分类:
  • 请求拦截器:在请求发送前进行必要操作处理,例如添加统一的cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装;
  • 响应拦截器:对响应结果(响应体)进行处理,通常是数据统一处理等,也常来判断登录失效等。
作用:
  • 用来将axios中共有参数,响应公共处理等公共部分,交给拦截器处理,减少axios发送请求时代码冗余。
拦截器一般做什么?
  • 修改请求头的一些配置项
  • 给请求的过程添加一些请求的图标
  • 给请求添加参数
  • 对响应结果进行处理

封装axios

封装参考

相关推荐
待磨的钝刨29 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式