原生Ajax，jQuery封装的Ajax以及axios

最新推荐文章于 2024-08-01 03:57:18 发布

DangR-Jisoo

最新推荐文章于 2024-08-01 03:57:18 发布

阅读量350

点赞数

分类专栏：前端 Vue jQuery 文章标签： ajax jquery javascript

本文链接：https://blog.youkuaiyun.com/Angela_Connie/article/details/119926456

版权

前端同时被 3 个专栏收录

45 篇文章

订阅专栏

Vue

18 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

原生Ajax，jQuery封装的Ajax以及axios

原生Ajax
工作原理：通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面
请求方式：get / post，在这里get与post的区别不做说明了，直接展示两种代码

var xhr=new XMLHttpRequest()
xhr.open('get','http://192.168.2.52:5000/query_get?name=1',true)//直接在url里面传递参数(name=1)
xhr.onreadystatechange=function () {
    if(xhr.readyState==4){
         if(xhr.status==200){
              console.log(xhr.responseText)
         }
     }
}
xhr.send()

post

var xhr=new XMLHttpRequest()
xhr.open('post','http://192.168.2.52:5000/query_post',true)
xhr.onreadystatechange=function () {
    if(xhr.readyState==4){
         if (xhr.status==200){
             console.log(xhr.responseText)
         }
    }
}
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")//post方法需要配置请求头信息
xhr.send('name=1')//传递的参数

再简单封装一下这两种请求方法，到时候用到哪种方法直接调用即可

		var Ajax = {
            get: function(url, fn) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4 && xhr.status == 200) {
                        fn.call(this, xhr.responseText);
                    }
                };
                xhr.send();
            },
            post: function(url, data, fn) {//data放要传入的参数
                var xhr = new XMLHttpRequest();
                xhr.open("POST", url, true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4 && xhr.status == 200) {
                        fn.call(this, xhr.responseText);
                    }
                };
                xhr.send(data);
            }
        }
        //调用get方法
        Ajax.get('http://192.168.2.52:5000/query_get?name=1',(data)=>{
            console.log(data)
        })
        //调用post方法
        Ajax.post('http://192.168.2.52:5000/query_post','name=1',(data)=>{
            console.log(data)
        })

jQuery封装Ajax($.get()，$.post()，$.ajax())

	$(document).ready(function () {
            $.get({
                url : 'http://192.168.2.52:5000/query_get',//url
                data : {name:10},//传入的参数
                dataType :'json',//数据类型
                success : function(data){
                    console.log(data)
                }
            })
        })

	$(document).ready(function () {
            $.post({
                url : 'http://192.168.2.52:5000/query_post',//url
                data : {name:8},//传入的参数
                dataType :'json',//数据类型
                success : function(data){
                    console.log(data)
                }
            })
        })

	$(document).ready(function () {
            $.ajax({
                url : 'http://192.168.2.52:5000/query_post',//url
                type: 'post',//请求方法
                data : {name:8},//传入的参数
                dataType :'json',//数据类型
                success : function(data){
                    console.log(data)
                }
            })
        })

$.get()，$.post()，$.ajax()这三种方法用法差不多，只是$.ajax()需要额外设置一个属性：type表示请求方式，默认为get
3. Vue里使用的axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
在Vue中使用axios的方法：
全局使用
– npm install axios --save-dev
–在main.js里配置import axios from ‘axios’
– axios不能使用Vue.use(axios)方法，所以需要给Vue的原型添加一个方法，即Vue.prototype.$axios=axios，其中$axios任意起名
– 在其他组件里可直接使用

created:function(){
 this.$axios.get("http://192.168.2.52:5000/query_get",{"name":1})
 	.then(res=>{
  		console.log(res.data);
 	})
 	.catch(err=>{
 		console.log(err)
	})
}

整体封装(在项目里创建一个request.js文件，里面封装一个整体的axios，包括请求错误提示，超时时间等一系列的设置)

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//post方法请求头的配置
var service = axios.create({
	baseURL: process.env.VUE_APP_BASE_API,//不携带参数的url，比如http://192.168.2.52:5000
	timeout: 30000//超时时间
})
//添加请求拦截器
service.interceptors.request.use(function(config) {
	config.headers['X-Authorization-Token'] = getToken()
	return config
}, function(error) {
	return Promise.reject(error)
})
//添加响应拦截器
service.interceptors.response.use(function(response) {
		console.info(response);
		const res = response.data;
		if (res.code !== 0) {
			let error = {};
			//各种http状态码，通过这些可以判断出现了什么问题
			switch (res.code) {
				case 400:
					error.message = '错误请求'
					break;
				case 401:
					error.message = res.msg
					break;
				case 403:
					error.message = '拒绝访问'
					break;
				case 404:
					error.message = '请求错误,未找到该资源'
					break;
				case 405:
					error.message = '请求方法未允许'
					break;
				case 408:
					error.message = '请求超时'
					break;
				case 500:
					error.message = res.msg
					break;
				case 501:
					error.message = '网络未实现'
					break;
				case 502:
					error.message = '网络错误'
					break;
				case 503:
					error.message = '服务不可用'
					break;
				case 504:
					error.message = '网络超时'
					break;
				case 505:
					error.message = 'http版本不支持该请求'
					break;
				default:
					error.message = `连接错误`
			}
			alert(error.message);
		} else {
			return response
		}
}, function(error) {
	if (error && error.response) {
		// 1.公共错误处理
		// 2.根据响应码具体处理
		switch (error.response.status) {
			case 400:
				error.message = '错误请求'
				break;
			case 401:
				error.message = '未授权，请重新登录'
				break;
			case 403:
				error.message = '拒绝访问'
				break;
			case 404:
				error.message = '请求错误,未找到该资源'
				window.location.href = "/NotFound"
				break;
			case 405:
				error.message = '请求方法未允许'
				break;
			case 408:
				error.message = '请求超时'
				break;
			case 500:
				error.message = res.msg
				break;
			case 501:
				error.message = '网络未实现'
				break;
			case 502:
				error.message = '网络错误'
				break;
			case 503:
				error.message = '服务不可用'
				break;
			case 504:
				error.message = '网络超时'
				break;
			case 505:
				error.message = 'http版本不支持该请求'
				break;
			default:
				error.message = `连接错误`
		}
	} else {
		// 超时处理
		if (JSON.stringify(error).includes('timeout')) {
			Message.error('服务器响应超时，请刷新当前页')
		}
		error.message('连接服务器失败')
	}
	Message.error(error.message)
	/***** 处理结束 *****/
	//如果不需要错误处理，以上的处理过程都可省略
	return Promise.resolve(error.response)
})
//导出request.js
export default request

– 上述封装结束，比如现在有个需求：一个登录和注册页面，把用户填写的用户名及密码作为参数提交给服务端，服务端做判断，这个文件名叫做login.js

import request from '.request.js'//首先导入上述封装的axios文件
const login = {
	// 登录方法
	login(params) {
		return request({
			url: '/admin/sys/login',
			method: 'post',
			params: params
		})
	},
	// 注册方法
	register(params) {
		return request({
			url: '/admin/sys/user/save',
			method: 'post',
			params: params
		})
	}
}
export default login//导出login.js

– 等到登录组件时，再使用login.js即可

import login from "login.js"
methods:{
	login:function(){
		var params={//要传递的参数，把它们以键值对的方式存储到一个变量params里面比较方便
			name:'...',
			password:'...'
		}
		login.login(params).then(res=>{//使用到login.js里面的login方法，传递参数
			if(res.data.code==0){//请求成功
				//具体操作
			}else{//请求失败
				//错误处理
			}
		})
	}
}

总结
如果项目里用到了jQuery库，需要调用后台接口时就可直接使用jQuery封装的Ajax，若除了调用接口而没有别的jQuery需求，还是使用原生Ajax比较方便，因为jQuery很大，单纯为了调用接口而引入jQuery就小题大做了
在Vue中调用后台接口使用axios比较好，若需调用的接口很少，使用上述全局使用的方法简便，若调用的接口很多很多，还是把它们封装出来为好