前后端数据交互，Ajax请求、axios请求

在前端项目中，前后端往往会进行数据交互，本文简要介绍了ajax请求和现在较为成熟的网络请求库axios使用。

1. ajax 可以发送的请求：GET请求/POST请求
   ajax请求返回的是一个promise对象。
2. 采用同源策略
   PS: 加载css、js可无视同源策略，但也是在服务端允许的条件下。

<img src="跨域图片地址" />
<link ref="跨域css地址" />
<script src="跨域的js地址"></script>

跨域常见方式：JSONP、CORS（本文不多作详解）

3. XMLHttpRequest是ajax的核心API；

function ajax(url) {
    const p = new Promise ((reslove,reject)=>{
        const xhr = new XMLHttpRequest();
        xhr.open('get',url,true); 
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                if(xhr.status === 200) {
                    reslove(
                        JSON.parse(xhr.responseText)
                    )
                }else if(xhr.status === 404){
                    reject(new Error('404 not found'))
                }
            }
        }
        xhr.send(null)
    })
    return p;
}

open方法，创建http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)。

xhr.open('get',url,true); //此处调用的是'get'方法

第一个参数是请求方式,一般用get与post方法；
第二个参数是请求的URL；
第三个参数是请求是同步进行还是异步进行,true表示异步。
4. ajax请求状态
（1）readyState
0：未初始化，未调用send()；
1：载入，已调用send()，正在发送请求
2：载入完成，send()执行完成，已接受到响应内容
3：交互，正在解析响应内容
4：完成，响应内容解析完成
（2）status
前端向后端请求数据时，无论请求的这个接口成功或者失败，都会带有返回的状态值。我们可以通过这个状态码可以得知这个请求是否成功，处于什么样的状态。
常见的状态码有：
200：交易成功
404：没有发现文件、查询或者URL
详细的xhr.status状态码

使用ajax请求

const url = '/data/test.json';
ajax(url).then(res=>{console.log(res)}).catch(err=>{console.error(err)})

在实际Vue3项目开发中，前后端数据交互使用axios，axios是对ajax技术的封装。

npm install axios

import axios from 'axios'

在项目开发中，将aixos请求封装一下，代码会更加清晰简洁，方便后期维护。

const instance = axios.create({
  baseURL: 'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd',
  timeout: 100000
})
export const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    instance.get(url, { params }).then((response) => {
      resolve(response.data)
    }, err => {
      reject(err)
    })
  })
}
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance.post(url, data, {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      resolve(response.data)
    }, err => {
      reject(err)
    })
  })
}

在组件中，使用数据请求时：

import { get,post } from '../../utils/request'

当然搭配 async await更香哦~

const hanldeRegister = async () => {
    try {
      const result = await post('/api/user/register', {
        username: data.username,
        password: data.password
      })
      if (result?.errno === 0) {
        router.push({ name: 'Login' })
      } else {
        showToast('注册失败')
      }
    } catch (e) {
      showToast('请求失败')
    }
  }

本文是一位仍在学习路上的中国青年随手而作，有错误欢迎指正，期待与诸位一起学习进步~