使用axios

本是古典何须时尚 2021-09-02 05:17 482阅读 0赞

axios不是专门为vue设计的，可以应用在各个领域中，

所以axios不是vue家族的插件，不能用Vue.use方法来安装

### **使用axios** ###

axios实现了promise规范：将异步变成同步

是指将异步操作的写法，变成同步的写法。

使用方式跟jquery类似

.get(url, config) 发送get请求的方法

url 请求地址

config 配置对象

.post(url, data, config) 发送post请求的方法

url 请求地址

data 携带的数据

config 配置对象

注意：

1 query数据我们既可以写在url上，也可以在config的params中定义。

2 无论是get请求和post请求都可以添加query数据。

我们通过then方法监听数据返回

参数都是回调函数

第一个参数表示成功时候的回调函数

参数是请求对象，其中的data属性表示返回的数据，我们可以解构使用。

第二个参数表示失败时候的回调函数

失败时候的回调函数还可以定义在catch方法中。

当多次使用then方法的时候，前一个then方法的返回值将作为后一个then方法的参数。

axios发送的请求，使用的是最新的规范：json数据规范

而query是模拟的表单数据：application/x-www-form-urlendcoded.

我们可以在config中，配置请求头的Content-Type属性来修改请求规范。

发送异步请求要搭建服务器。

// 引入vue
    import Vue from 'vue';
    // 引入axios
    import axios from 'axios';
    // 安装axiso
    // Vue.prototype.axios = axios;
    // Vue.prototype.ickt = axios;
    // 为了语义化，定义成$http
    Vue.prototype.$http = axios;
    
    // 定义组件
    let Home = Vue.extend({
    	template: '<h1>home page</h1>',
    	created() {
    		console.log('home', this)
    	}
    })
    
    // 实例化
    let app = new Vue({
    	// 注册组件
    	components: { Home },
    	// 视图
    	el: '#app',
    	// 数据
    	data: {
    		msg: ''
    	},
    	// 组件创建完成
    	created() {
    		// 发送请求
    		// axios
    		this.$http
    			// 1 url上添加query
    			// .get('data/demo.json?color=red', {
    			// 	// 2 配置中添加query
    			// 	params: {
    			// 		num: 100
    			// 	}
    			// })
    			// post请求
    			.post('data/demo.json?color=red', { msg: 'hello' }, {
    				// 2 配置中添加query
    				params: {
    					num: 100
    				},
    				// 修改请求格式
    				headers: {
    					'Content-Type': 'application/x-www-form-urlencoded'
    				}
    			})
    			// 解构并使用数据
    			.then(({ data }) => {
    				// 存储数据
    				this.msg = data.title;
    			})
    			// 监听数据返回
    			// .then(res => res.data)
    			// 前一个then方法的返回值，将是下一个then方法的参数
    			// .then(data => console.log(data))
    			// .then(res => console.log(res), err => console.log(111, err))
    			// .catch(err => console.log(222, err))
    		console.log(this)
    	}
    })

### axios提供了一下几种请求方式 ###

### 发送get ###

1.axios.get(url[, config])  执行 GET 请求
    	eg:
    
    
     
    	// 向具有指定ID的用户发出请求
    	axios.get('/user?ID=12345')
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });
    	  
    
    
    	// 也可以通过 params 对象传递参数
    	axios.get('/user', {
    		params: {
    		  ID: 12345
    		}
    	  })
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });

### 发送post ###

axios.post(url[, data[, config]]) 执行 POST 请求
    	eg:
    
    	axios.post('/user', {
    		firstName: 'Fred',
    		lastName: 'Flintstone'
    	  })
    	  .then(function (response) {
    		console.log(response);
    	  })
    	  .catch(function (error) {
    		console.log(error);
    	  });

### 执行多个请求 ###

8.axios.all(iterable)执行多个并发请求
     
        eg:
    		function getUserAccount() {
    		  return axios.get('/user/12345');
    		}
     
    		function getUserPermissions() {
    		  return axios.get('/user/12345/permissions');
    		}
     
    		axios.all([getUserAccount(), getUserPermissions()])
    		  .then(axios.spread(function (acct, perms) {
    			// 两个请求现在都执行完成
    		 }));

案例：

本地data.json(f放在src同级)

{
    	"seller": {
    		"name": "粥品香坊（回龙观）",
    		"description": "蜂鸟专送",
    		"deliveryTime": 38,
    		"score": 4.2,
    		"serviceScore": 4.1,
    		"foodScore": 4.3,
    		"rankRate": 69.2,
    		"minPrice": 20,
    		"deliveryPrice": 4,
    		"ratingCount": 24,
    		"sellCount": 90,
    		"bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
    		"supports": [{
    			"type": 0,
    			"description": "在线支付满28减5"
    		}, {
    			"type": 1,
    			"description": "VC无限橙果汁全场8折"
    		}, {
    			"type": 2,
    			"description": "单人精彩套餐"
    		}, {
    			"type": 3,
    			"description": "该商家支持发票,请下单写好发票抬头"
    		}, {
    			"type": 4,
    			"description": "已加入“外卖保”计划,食品安全保障"
    		}],
    		"avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
    		"pics": ["http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180", "http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"],
    		"infos": ["该商家支持发票,请下单写好发票抬头", "品类:其他菜系,包子粥店", "北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340", "营业时间:10:00-20:30"]
    	}
    }

2.修改webpack-dev-conf.js

//第一步
        const express = require('express')
        const app = express()//请求server
        var appData = require('../data.json')//加载本地数据文件
        var seller = appData.seller //获取对应的本地数据
        var goods = appData.goods
        var ratings = appData.ratings
        var apiRoutes = express.Router()
        app.use('/api', apiRoutes)//通过路由请求数据
         
        //第二步
        before(app) {  
        	app.get('/api/seller', (req, res) => {  
        		res.json({  
        			// 这里是你的json内容  
        			errno: 0,  
        			data: seller  
        		})  
        	}),
        	app.post('/api/seller', (req, res) => {  
        		res.json({  
        			// 这里是你的json内容  
        			errno: 0,  
        			data: seller  
        		})  
        	})
        }

.axios.vue

<template>
        	<div>
        		<h1>axios基础介绍</h1>
        		<button @click="get">get请求</button>
        		<button @click="post">post请求</button>
        		<button @click="http">aixos</button>
        		<p>{
       {msg}}</p>
        	</div>
        </template>
         
        <script>
        import axios from 'axios'
        export default {
        	data () {
        		return {
        			msg:'',
        		}
        	},
        	created(){
        		//全局拦截器
        		axios.interceptors.request.use(function (config) {  
        		    // 在发送请求之前做些什么  
        		    console.log('config')
        		    console.log(config)
        		    return config;  
        		}, function (error) {  
        		    // 对请求错误做些什么  
        		    return Promise.reject(error);  
        		}); 
        	},
        	methods: {
        		get(){
        			//1.简单的获取
        			// axios.get("/api/seller").then(res =>{
        			// 	this.msg = res;
        			// })
        			//2.传参数
        			axios.get("/api/seller",{
        				//传参数
        				params:{userid:"999"},
        				//请求头部
        				headers:{
        					token:"jack"
        				}
        			}).then(res =>{
        				this.msg = res;
        			}).catch(function(error){
        				//获取错误
        				console.log("error:"+error)
        			})
        		},
        		post(){
        			axios.post("/api/seller",{
        				//传参数
        					userid:"888"
        				},{
        					headers:{//请求头部
        					token:"tom"
        				}
        			}).then(res =>{
        				this.msg = res;
        			}).catch(function(error){
        				//获取错误
        				console.log("error:"+error)
        			})
        		},
        		http(){
        			//注意：get  传参是params   post传参是data
        			axios({
        				url:"/api/seller",
        				methods:"get",
        				params:{
        					userid:"101"
        				},
        				headers:{
        					token:"http-test"
        				}
        			}).then(res =>{
        				this.msg = res;
        			})
        		}
         
        	}
        }
        </script>
         
        <style  lang="scss">
        </style>

![20180608160128990][]

[https://blog.csdn.net/gao\_xu\_520/article/details/79726298?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu\_weight&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu\_weight][https_blog.csdn.net_gao_xu_520_article_details_79726298_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight]

[20180608160128990]: /images/20210813/ddfd9928197a4248980ce74eec89511e.png
[https_blog.csdn.net_gao_xu_520_article_details_79726298_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight]: https://blog.csdn.net/gao_xu_520/article/details/79726298?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight