Vue中axios的使用备忘

深碍√TFBOYSˉ_ 2024-03-30 14:44 6阅读 0赞

#### 文章目录 ####

*  Vue中axios的使用备忘
 *   *  1. 安装axios
     *  2. main.js中引入axios
     *  3. 组件中使用axios
     *   *  3-1 get请求
         *  3-2 post请求
         *  3-3 put和patch请求
         *  3-4 delete请求
     *  4. axios并发请求\_同时发送多个请求，统一处理返回值
     *  5. axios实例
     *  6. 拦截器 -- 在请求或响应被处理前执行拦截
     *   *  6-1 请求拦截器
         *  6-2 响应拦截器
     *  7 错误处理
     *  8. 取消请求--用于取消正在进行的http请求
     *  9. 封装好的axios的工具类使用
     *   *  9-1 工具类：http.js
         *  9-2 工具类的使用实例：

## Vue中axios的使用备忘 ##

### 1. 安装axios ###

# 在安装node.js的前提下，在命令行窗口下执行指令：
    npm i axios --save

### 2. main.js中引入axios ###

import axios from 'axios'
    Vue.prototype.$axios = axios

### 3. 组件中使用axios ###

axios请求的方法简要列举如下：
    	  get：获取数据，请求指定的信息，返回实体对象
    	  post：向指定资源提交数据
    	  put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
    	  patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
    	  delete：请求服务器删除指定的数据

#### 3-1 get请求 ####

this.$axios.get('/a.json',{
        
        params: {
        
            id:1
        }
    }).then(res=>{
        
    	console.log(res.data);
    },err=>{
        
    	console.log(err);
    })
    			
    //方法二
    this.$axios({
        
    	method: 'get',
    	url: '/a.json',
        	params: {
        
                id:1
            }
    }).then(res=>{
        
    	console.log(res.data);
    },err=>{
        
    	console.log(err);
    })

#### 3-2 post请求 ####

// form-data 表单提交，图片上传、文件上传时用该类型比较多
    // application/json 一般是用于 ajax 异步请求
    // 		form-data和json的区别在参数格式上, 一个只能传对象，一个可以传对象和数组，格式为json
    
    //方法一
    this.$axios.post('/url',{
        
    	id:1
    }).then(res=>{
        
    	console.log(res.data);
    },err=>{
        
    	console.log(err);
    })
    
    //方法二
    $axios({
        
    	method: 'post',
    	url: '/url',
    	data: {
        
    		id:1
    	}
    }).then(res=>{
        
    	console.log(res.data);
    },err=>{
        
    	console.log(err);
    })
    
    // form-data请求
    let data = {
        
    	//请求参数
    }
    let formdata = new FormData();
    for(let key in data){
        
    	formdata.append(key,data[key]);
    }
    this.$axios.post('/a.json',formdata).then(res=>{
        
    	console.log(res.data);
    },err=>{
        
    	console.log(err);
    })

#### 3-3 put和patch请求 ####

//put请求
    this.$axios.put('/url',{
        
    	id:1
    }).then(res=>{
        
    	console.log(res.data);
    })
    
    //patch请求
    this.$axios.patch('/url',{
        
    	id:1
    }).then(res=>{
        
    	console.log(res.data);
    })

#### 3-4 delete请求 ####

this.$axios.delete('/url',{
        
    	params: {
        
    		id:1
    	}
    }).then(res=>{
        
    	console.log(res.data);
    })
    
    this.$axios.delete('/url',{
        
    	data: {
        
    		id:1
    	}
    }).then(res=>{
        
    	console.log(res.data);
    })
    
    //方法二
    axios({
        
        method: 'delete',
        url: '/url',
        params: {
         id:1 },
        data: {
         id:1 } 
    }).then(res=>{
        
    	console.log(res.data);
    })

### 4. axios并发请求\_同时发送多个请求，统一处理返回值 ###

// 同时进行多个请求，并统一处理返回值
    this.$axios.all([
    	this.$axios.get('/a.json'),
    	this.$axios.get('/a.json')
    ]).then(
    	this.$axios.spread((goodsRes,classifyRes)=>{
        
    		console.log(goodsRes.data);
    		console.log(classifyRes.data);
    	})
    )

### 5. axios实例 ###

### 6. 拦截器 – 在请求或响应被处理前执行拦截 ###

#### 6-1 请求拦截器 ####

// 全局axios请求拦截器
    this.$axios.interceptors.request.use(config=>{
        
    	// 发生请求前的处理
    	return config
    },err=>{
        
    	// 请求错误处理
    	return Promise.reject(err);
    })
    
    // axios实例拦截器
    let instance = $axios.create();
    instance.interceptors.request.use(config=>{
        
        return config
    })

#### 6-2 响应拦截器 ####

// 全局axios响应拦截器
    this.$axios.interceptors.response.use(res=>{
        
    	//请求成功对响应数据做处理
    	return res //该返回对象会传到请求方法的响应对象中
    },err=>{
        
    	// 响应错误处理
    	return Promise.reject(err);
    })
    
    // 取消拦截
    this.$axios.interceptors.request.eject(instance);

### 7 错误处理 ###

this.$axios.get('/url').then(res={
        
    	//…………
    }).catch(err=>{
        
    	//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
    	console.log(err);
    })

### 8. 取消请求–用于取消正在进行的http请求 ###

let source = this.$axios.CancelToken.source();
    this.$axios.get('/a.json',{
        
    	cancelToken: source
    }).then(res=>{
        
    	console.log(res)
    }).catch(err=>{
        
    	//取消请求后会执行该方法
    	console.log(err)
    })

### 9. 封装好的axios的工具类使用 ###

#### 9-1 工具类：http.js ####

import axios from 'axios';
    import ElementUI from "element-ui";
    
    axios.defaults.baseURL = ''
    // 设置通用Http请求的超时时间
    axios.defaults.timeout = config.http_timeout
    
    // HTTP response 拦截器
    axios.interceptors.response.use(
    	(response) => {
        
    		return response;
    	},
    	(error) => {
        
    		if (error.response) {
        
    			if (error.response.status == 404) {
        
    				ElementUI.Message.error("Status:404，正在请求不存在的服务器记录!")
    			} else if (error.response.status == 500) {
        
    				ElementUI.Message.error(error.response.data.message || "Status:500，服务器发生错误！!")
    			} else {
        
    				ElementUI.Message.error(error.message || "Status:${error.response.status}，未知错误！")
    			}
    		} else {
        
    			ElementUI.Message.error("请求服务器无响应!")
    		}
    
    		return Promise.reject(error.response);
    	}
    );
    
    var http = {
        
    
    	/** get 请求
    	 * @param  {接口地址} url
    	 * @param  {请求参数} params
    	 * @param  {参数} config
    	 */
    	get: function(url, params={
         }, config={
         }) {
        
    		return new Promise((resolve, reject) => {
        
    			axios({
        
    				method: 'get',
    				url: url,
    				params: params,
    				...config
    			}).then((response) => {
        
    				resolve(response.data);
    			}).catch((error) => {
        
    				reject(error);
    			})
    		})
    	},
    
    	/** post 请求
    	 * @param  {接口地址} url
    	 * @param  {请求参数} data
    	 * @param  {参数} config
    	 */
    	post: function(url, data={
         }, config={
         }) {
        
    		return new Promise((resolve, reject) => {
        
    			axios({
        
    				method: 'post',
    				url: url,
    				data: data,
    				...config
    			}).then((response) => {
        
    				resolve(response.data);
    			}).catch((error) => {
        
    				reject(error);
    			})
    		})
    	},
    
    	/** put 请求
    	 * @param  {接口地址} url
    	 * @param  {请求参数} data
    	 * @param  {参数} config
    	 */
    	put: function(url, data={
         }, config={
         }) {
        
    		return new Promise((resolve, reject) => {
        
    			axios({
        
    				method: 'put',
    				url: url,
    				data: data,
    				...config
    			}).then((response) => {
        
    				resolve(response.data);
    			}).catch((error) => {
        
    				reject(error);
    			})
    		})
    	},
    
    	/** patch 请求
    	 * @param  {接口地址} url
    	 * @param  {请求参数} data
    	 * @param  {参数} config
    	 */
    	patch: function(url, data={
         }, config={
         }) {
        
    		return new Promise((resolve, reject) => {
        
    			axios({
        
    				method: 'patch',
    				url: url,
    				data: data,
    				...config
    			}).then((response) => {
        
    				resolve(response.data);
    			}).catch((error) => {
        
    				reject(error);
    			})
    		})
    	},
    
    	/** delete 请求
    	 * @param  {接口地址} url
    	 * @param  {请求参数} data
    	 * @param  {参数} config
    	 */
    	delete: function(url, data={
         }, config={
         }) {
        
    		return new Promise((resolve, reject) => {
        
    			axios({
        
    				method: 'delete',
    				url: url,
    				data: data,
    				...config
    			}).then((response) => {
        
    				resolve(response.data);
    			}).catch((error) => {
        
    				reject(error);
    			})
    		})
    	},
    
    	/** jsonp 请求
    	 * @param  {接口地址} url
    	 * @param  {JSONP回调函数名称} name
    	 */
    	jsonp: function(url, name='jsonp'){
        
    		return new Promise((resolve) => {
        
    			var script = document.createElement('script')
    			var _id = `jsonp${
          Math.ceil(Math.random() * 1000000)}`
    			script.id = _id
    			script.type = 'text/javascript'
    			script.src = url
    			window[name] =(response) => {
        
    				resolve(response)
    				document.getElementsByTagName('head')[0].removeChild(script)
    				try {
        
    					delete window[name];
    				}catch(e){
        
    					window[name] = undefined;
    				}
    			}
    			document.getElementsByTagName('head')[0].appendChild(script)
    		})
    	}
    }
    export default http;

#### 9-2 工具类的使用实例： ####

================【说在前头_Zhaof--Http请求】
    Vue中使用Axios，发起Http请求，   -- 【http.js自己封装实现了，过程好艰难呀，好在最终完成了】
    1. 在public/config.js中配置好Url地址，如：url_1； 【config.js在public/index中引用了，处处可用】
    **************************************************************
    // public/config.js内容如：
    let config = {
        
        // 配置外部其他的接口Api地址url
        url_1: "http://127.0.0.1:8080/UserInfoApi",
        url_2: "http://192.168.217.132:9090/Api",
    
        springbootapi_url_zhaof: "http://127.0.0.1:9090/api",
        http_timeout: 60000
    }
    **************************************************************
    
    2. 在src/api/中的js文件新增方法，如下实例：userInfo， 这样Vue页面中处处可用，参考src/api/zhaof.js
    **************************************************************
        // 使用自定义的http发起指定url的请求
        userInfo: {
        
          url: config.url_1 +'/userInfo',  // 完整url即: http://127.0.0.1:8080/UserInfoApi/userInfo
          name: '测试使用自定义的htt2发起http请求',
          get: async function(){
        
              return await http.get(this.url)
          }
        },  
    **************************************************************
    
    3. Vue中调用上方的userInfo请求：
    ***************************************************************
    methods: {
        
        async getInfo() {
        
          // MessageBox.alert("我点击获取数据的按钮啦!","提示")
          // this.$message.success("success成功的提醒内容")
          // this.$message.error("error错误的提醒内容")
          // this.$message.info ("info的提醒内容")
          // this.$message.warning("warning的提醒内容")
    
          console.log("开始执行userInfo_zhangshan03")
    
          // 服务器不存在，404之类的接口错误，下方代码就不会再执行了
          var res = await this.$api.zhaof.userInfo.get()
          // 接口相应的返回值
          console.log(res)
    
          if(res.code == "200"){
        
            this.$message.success("接口请求成功!")
            this.userId = res.data.userid
            this.userName = res.data.username
            this.email = res.data.email
            this.passWord = res.data.password
          }else{
        
            // 服务器不存在之类的错误，在http.js中已经统一封装了
    
            // 接口通畅，但返回业务数据，逻辑码错误， 弹出错误信息即可，
            // let errMsg = res.message;
            // this.$message.error("接口请求失败!!!" + errMsg)
          }
          console.log("执行userInfo结束_zhangshan03")
        },
    ***************************************************************