vue整合axios 未完

一、简介

1、介绍

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

2、特性：

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

二、引用步骤

1、安装

cnpm i axios --save

2、全局引用

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

三、基本使用

1、异步请求之GET方式（查询）

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方式（添加）

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

3、其他方式的请求

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

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

//创建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

封装参考