AJAX工作原理与Axios的封装

Posted 2021-04-15 壹本漫畵闯天涯

Ajax的原理:

        简单来说通过浏览器的 javascript 对象 XMLHttpRequest （Ajax引擎）对象向服务器发送异步请求并接收服务器的响应数据，然后用 javascript 来操作 DOM 而更新页面，这其中最关键的一步就是从服务器获得请求数据，即用户的请求间接通过 Ajax 引擎发出而不是通过浏览器直接发出，同时 Ajax 引擎也接收服务器返回响应的数据，所以不会导致浏览器上的页面全部刷新

①创建XMLHttpRequest对象,也就是创建一个异步调用对象②创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息③设置响应HTTP请求状态变化的函数④发送HTTP请求⑤获取异步调用返回的数据//第一步，创建XMLHttpRequest对象var xmlHttp = new XMLHttpRequest();function CommentAll() { //第二步，注册回调函数 xmlHttp.onreadystatechange =callback1; //{ // if (xmlHttp.readyState == 4) // if (xmlHttp.status == 200) { // var responseText = xmlHttp.responseText;
 // } //} //第三步，配置请求信息，open(),get //get请求下参数加在url后，.ashx?methodName = GetAllComment&str1=str1&str2=str2 xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
 //post请求下需要配置请求头信息 //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 //第四步，发送请求,post请求下，要传递的参数放这 xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
}//第五步，创建回调函数function callback1() { if (xmlHttp.readyState == 4) if (xmlHttp.status == 200) { //取得返回的数据 var data = xmlHttp.responseText; //json字符串转为json格式 data = eval(data); $.each(data, function(i, v) { alert(v); });  }}

axios封装：

        创建一个RequestAxios.js，这里面存放的axios的配置以及拦截器等，最后导出一个axios对象。我平常elementUI用的比较多，这里你也可以使用自己的UI库。

import axios from 'axios'// axios.defaults.baseURL = "http://xx.xxxx.cn/api/"import { Message } from 'element-ui'axios.defaults.timeout = 6000 // 请求超时时间axios.defaults.baseURL = process.env.VUE_APP_URL;// 拦截器配置//请求拦截器axios.interceptors.request.use(function(config) { // startLoading() return config }), function(error) { // endLoading() return Promise.reject(error) } //响应拦截器axios.interceptors.response.use(data => { // endLoading() return data}, err => { if (err.message == 'Network Error') { Message.error('服务器异常，请稍后再试') return Promise.reject(err) } // endLoading() if (err.message.includes('timeout')) { Message.error('请求超时，请稍后再试') return Promise.reject(err) } if (err.response.status === 504 || err.response.status === 404) { Message.error('服务器异常！') } else if (err.response.status === 500) { Message.error(err.response.data.message) } else if (err.response.status === 403 || err.response.status === 400 || err.response.status === 401) { Message.error(err.response.data.msg) } else { Message.error('未知错误！') }})
// 带token 可在url后方拼接路径参数 GET请求 export function tokenURLGet(url) { return function(path, params) { let apiUrl = path ? `${url}/${path}` : url return axios.get(apiUrl, { params, headers: { Authorization: ` Bearer ${sessionStorage.getItem('access_token')}` } }).then(res => { return res }).catch(e => { console.log(e) }) }}
// 带token 可在url后方拼接路径参数 DELETE请求export function tokenURLDelete(url) { return function(path, params) { return axios.delete(`${url}/${path}`, { params, headers: { Authorization: ` Bearer ${sessionStorage.getItem('access_token')}` } }).then(res => { return res }).catch(e => { console.log(e) }) }}// 带token 可在url后方拼接路径参数 POST请求export function tokenURLPost(url) { return function(path, params) { let apiUrl = path ? `${url}/${path}` : url return axios.post(apiUrl, params, { headers: { Authorization: ` Bearer ${sessionStorage.getItem('access_token')}` } }).then(res => { return res }).catch(e => { console.log(e) }) }}
// 带token 可在url后方拼接路径参数 PUT请求export function tokenURLPut(url) { return function(path, params) { return axios.put(`${url}/${path}`, params, { headers: { 'Authorization': ` Bearer ${sessionStorage.getItem('access_token')}` } }).then(res => { return res }).catch(e => { console.log(e) }) }}
// 表单POST请求export const postRequest = (url, params) => { return axios({ method: 'post', url: url, data: params, transformRequest: [function(data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': ` Bearer ${sessionStorage.getItem('access_token')}` } }).then(res => { return res }).catch(e => { console.log(e) })}

可以再将请求的url再封装一遍，创建一个ApiList.js:

import { tokenURLGet, tokenURLPost, tokenURLDelete, tokenURLPut} from '../RequestAxios.js'//封装的请求接口const getMenu = tokenURLGet(`/sysadmin-server/menu/user`)    const createMenu = tokenURLPost(`/sysadmin-server/menu`)   const delMenu = tokenURLDelete(`sysadmin-server/menu`)    const editMenu = tokenURLPut(`sysadmin-server/menu`)
export {    getMenu, createMenu, delMenu,    editMenu,}

在vue组件中使用的方法:

import {getMenu,createMenu,delMenu,editMenu} from '@/api/ApiList.js'//普通请求方式getMenu().then(res=>{})//url拼接参数createMenu('需要拼接到URL的参数',{data:this.data}).then(res=>{})