AJAX和Axios笔记

AJAX发送请求

1、get请求

function get() {
    // 创建ajax实例对象
    let ajax = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
    // 打开 ajax 对象
    ajax.open('get', url, true)
    // 设置请求成功的回调函数
    ajax.onreadystatechange = () => {
        if (ajax.readyState == 4 && ajax.status == 200) {
            let data = JSON.parse(ajax.response)
            console.log(data);
        }
    }
    // 发送ajax 请求
    ajax.send()
}

2、post请求

function post() {
    // 创建ajax实例化对象
    let ajax = XMLHttpRequest ? new XMLHttpRequest() :
        new ActiveXObject('microsoft.XMLHTTP')
    // 打开ajax对象
    ajax.open('post', header)
    // 配置post请求头
    ajax.setRequestHeader('content-type','application/x-www-form-urlencoded')
    // 请求成功后的回调函数
    ajax.onreadystatechange =() => {
        if (ajax.readyState == 4 && ajax.status == 200) {
            let data = JSON.parse(ajax.response)
            if (data.code == 200) {
                console.log(data);
            }
        }
    }
    ajax.send(url)
}

3、ajax封装

function myAjax(options) {
    return new Promise((resolve, reject) => {
        options = options || {}

        // 参数默认值
        let method = options.method || 'get'
        // 请求地址
        let url = options.url || null
        // 请求发送数据(对象)
        let data = options.data || null;
        // 请求头
        let headers = options.headers || {};
        // 请求方式(异步或者同步)
        let async = options.async || true;
    
        // 将对象格式化为字符串的形式
        data = formatData(data)
    
        // ajax实例化
        let xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
        
        // 判断请求方式
        // 将方法转化为小写的
        if (method.toLowerCase() === 'get') {
            // 打开请求
            xhr.open(method,url +'?'+ data,async)
            // 发送请求
            xhr.send(null)
        } else if (method.toLowerCase() === 'post') {
            // 打开请求
            xhr.open(method,url,async)
            // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset = utf-8')
            // 发送请求
            xhr.send(data)
        }
    
        // 事件监听
        xhr.onreadystatechange = function () {
            // 判断xhr的状态
            if (xhr.readyState !== 4) {
                return
            }
            // 判断xhr的状态码
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                console.log('后端返回的数据',xhr.responseText);
                resolve(JSON.parse(xhr.responseText))
            } else {
                reject(xhr.status)
            }
        }
    }
)
   
    
}
// 将对象转化为字符串形式
function formatData(data) {
    if (data) {
        let arr = []
        for (let key in data) {
            arr.push(key + '=' + data[key])
        }
        return arr.join('&')
    }
}

3、class封装ajax

class Ajax {
  constructor(config) {
    this._xhr = null
    return this.request(config)
  }

  // get 情况下需要拼接字符格式
  serialize(data) {
    let params = ''
    for (const key in data) {
      params += `${key}=${data[key]}&`
    }
    params = '?' + params.substring(0, params.length - 1)
    return params
  }
  // 传入参数预处理
  config({
    baseURL = '', // 前缀
    url = '', // 路径
    data = {}, // 传入的参数
    method = 'get',
    timeout = 1000 * 5, // 默认等待 5s
    header = { // 请求头
      'Content-Type': 'application/json; charset=UTF-8',
    },
  }) {
    method = method.toUpperCase() // 统一转换为大写
    url = baseURL + url
    const serializeData = this.serialize(data)
    if (method === 'GET') url = url + serializeData
    data = (method === 'GET') ? null : serializeData;

    const config = {
      baseURL,
      url,
      data,
      method,
      timeout,
      header,
    }

    return config
  }
  // xhr 请求方式
  request(config) {
    const { url, method, data, timeout, header } = this.config(config)

    let xhr
    if (window.XMLHttpRequest) xhr = new XMLHttpRequest()
    this._xhr = xhr

    // 返回 promise 对象
    return new Promise((resolve, reject) => {
      if (!xhr) reject('版本不支持')

      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4){
          if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            resolve(xhr.responseText)
          } else {
            const error = {
              status: xhr.status,
              err: xhr.statusText
            };
            reject(error)
          }
        }
      }

      // 请求超时
      xhr.timeout = timeout
      xhr.ontimeout = e => {
        console.error('timeout', e)
        reject(e)
      }

      xhr.open(method, url, true)

      // 设置请求头
      for(const key of Object.keys(header)) {
        xhr.setRequestHeader(key, header[key])
      }

      xhr.send(data)
    })
  }

  static get(url, params = {}) {
    const config = {
      url,
      method: 'get',
      data: {
        ...params
      }
    }
    return this.request(config)
  }

  static post(url, data = {}) {
    const config = {
      url,
      method: 'post',
      data: {
        ...data
      }
    }
    return this.request(config)
  }
}

new Ajax()

// 升级优化
// 判断请求类型是否为GET
// let isGet = /^(GET|DELETE|HEAD)$/i.test(method)
// 判断url有没有？，有的话就添加&
// let symbol = url.indexOf('?')>-1 ? '&' : '?'
// GET系列请求才处理cache
// if(isGet){
//   !cache ? url+= `${symbol}_${Math.random()}`: null
// }

Axios封装

import axios from "axios";
// import store from '@/store/index'
// import QS from 'qs'
import router from "../router";
import {  Message,Loading } from "element-ui";

// 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀
// 环境的切换
let baseURL;
if (process.env.NODE_ENV == "development") {
  baseURL = "http://172.16.101.8:8010";
} else if (process.env.NODE_ENV == "test") {
  // 测试
  baseURL = "/test";
} else if (process.env.NODE_ENV == "production") {
  baseURL = "https://www.faychou.com";
}

// 实例化 axios
const instance = axios.create({
  baseURL, // 设置 axios 的默认请求地址
  // timeout: 5000, // 请求超时
  headers: {
    // 可定义统一的请求头部
    post: {
      // 'Content-Type': 'application/json'
      // 如果后端不支持 JSON 数据，则需要设置 application/x-www-form-urlencoded;charset=UTF-8
    },
  },
});

let loadingInstance;

// 请求拦截器(在发送请求之前做些什么：统一处理 token，显示loading 等等)
instance.interceptors.request.use(
  (config) => {
    // const token = store.state.token
    console.log("发送请求前");
    // 可添加开启loading效果的函数
    // loadingInstance = Loading.service();

    // token 存在就添加到请求头里
    // 这个写法是 nodejs 的格式，必须在 Authorization 中加上 token，并且 token 前必须加上 'Bearer ' 字符串
    // java 不需要 'Bearer ' 前缀，也可能将 token 放在 Authorization 字段也可能放在 Auth 字段
    // token && (config.headers.Authorization = 'Bearer ' + token)
    // token && (config.headers.Auth = token)

    // 过滤请求参数中的 null undefined ''的函数
    // cleanObject()

    // 如果是以 application/x-www-form-urlencoded;charset=UTF-8 格式提交数据
    // 则需要将 POST 的数据序列化 QS.stringify(params)
    return config;
  },
  (error) => {
    return Promise.error(error);
  }
);

// 响应拦截器(对响应数据做点什么)
instance.interceptors.response.use(
  (response) => {
    // 可添加关闭 loading 效果的函数
    loadingInstance.close();

    // 如果返回的状态码为 200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status == 200) {
      return Promise.resolve(response.data);
    } else {
      return Promise.reject(response);
    }
  },
  (error) => {
    loadingInstance.close(); // 可添加关闭loading效果的函数

    // 跟后台开发人员协商好统一的错误状态码
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    console.log(error);

    if (error.response.status === 401) {
      // 未登录则跳转登录页面，并携带当前页面的路径
      Message.error("请登录！");
      router.replace({
        // 回退登录页
        path: "/login",
        query: {
          // 参数
          redirect: router.currentRoute.fullPath, // 记录你想访问的路径，那么登陆后可以实现直接跳转到该路径而不是首页
        },
      });
    } else if (error.response.status === 402) {
      //登录失败
      Message.error("登录失败，账户密码错误，请重新登录");
    } else if (error.response.status === 403) {
      // token 过期
      // Message.error('token失效，请重新登录！')
      // removeStorageToken() // 清除本地过期 token
      router.replace({
        // 回退登录页
        path: "/login",
        query: {
          redirect: router.currentRoute.fullPath,
        },
      });
    } else if (error.response.status === 404) {
      // 404
    } else if (error.response.status === 408) {
      // 超时
    } else if (error.response.status === 500) {
      // 500 错误
      return Promise.reject(error);
    } else {
      if (!window.navigator.onLine) {
        // Message.warning('网络异常，请检查网络是否正常连接')
      } else {
        // Message.warning('服务器异常，请联系管理员')
      }
    }
    error.name = "aaaaaaaaaa";
    return Promise.reject(error); // 将错误继续返回给到具体页面
  }
);

export default instance;

发送请求

// get 请求
const res = await this.$http.get('/fuwu/findshoufukuanAll', {
    params: {
        currentPage: 1,
        pageSize: 1,
        clean_order_number: '11222'
    }
})
console.log(res, '财务信息');
// 或者 放在url
const res = await this.axios.get('/teachers/showTeacher?id=' + id)
// 或者
const res = await this.$http({
     method: 'get',
     url: '/fuwu/findtixin',
     params: {
         currentPage: this.query.currentPage,
         pageSize: this.query.pageSize
     }
 })
 

// post 请求
const res = await this.$http.post('/fuwu/findshoufukuanAll', 
{
    currentPage: 1,
    pageSize: 1,
    clean_order_number: '11222'
})
console.log(res, '财务信息');
// 或者
const res = await this.axios.post('/teachers/delTeacher', { id })
// 或者
const res = await this.$http({
     method: 'post',
     url: '/fuwu/findtixin',
     data: {
         currentPage: this.query.currentPage,
         pageSize: this.query.pageSize
     }
 })