06-ajax请求

fetch请求

原生的 Fetch API

//使用URLSearchParams构建查询参数
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
fetch('https://example.com/api/upload-avatar?' + params.toString(), {
    method: 'POST',
    headers: {
        'Content-Type': 'multipart/form-data',
        'token': '123456'
    },
    body: JSON.stringify({
            username: 'admin',
            password: '123'
         })
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功', data);
    })
    .catch(error => {
        console.error('上传失败', error);
    });

axios的使用

npm安装

npm install axios

yarn add axios

CDN引入

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

全局设置

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://your-api-url', // 基础URL
  timeout: 1000, // 请求超时时间
  // 可以设置默认的headers
  headers: {'Content-Type': 'application/json'}
});

get请求

axios.get(url, {
  params: {
      param1: 'value1',
      param2: 'value2'
  },
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  },
  timeout: 5000,
  withCredentials: true, //是否携带跨域请求的凭证。
  responseType: 'json',
  onUploadProgress: function(progressEvent) {
    // 上传进度监听回调函数
  },
  onDownloadProgress: function(progressEvent) {
    // 下载进度监听回调函数
  }
}).then(response => {
    console.log('Response received:', response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

POST请求

带参数，带header的POST请求

axios.post(url, data, {
  params: {
    param1: 'value1',
    param2: 'value2'
  },
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 5000,
  withCredentials: true,
  responseType: 'json',
  onUploadProgress: function(progressEvent) {
    // 上传进度监听回调函数
  },
  onDownloadProgress: function(progressEvent) {
    // 下载进度监听回调函数
  }
});

通用请求

axios({
  method: 'post',
  url: 'https://example.com/api/login',
  data: {
    username: 'admin',
    password: '123'
  },
  params: {
    param1: 'value1',
    param2: 'value2'
  },
  headers: {
    'Content-Type': 'application/json'
  }
}).then(function (response) {
        // 处理响应数据
        console.log(response.data);
    }).catch(function (error) {
        // 处理错误情况
        console.log(error);
    });

自己写的工具类

request.js

工具类1

// 引入axios
import axios from 'axios';
import {ElMessage} from "element-plus";
const domain = "http://127.0.0.1/zhongya/api/portal"
// 创建axios实例
const service = axios.create({
    baseURL: domain, // api的base_url
    timeout: 10000, // 请求超时时间
    withCredentials: true, // 是否允许携带cookie跨域
});

// 请求拦截器
service.interceptors.request.use(
    config => {
        const timeStamp = new Date().getTime()
        config.headers['timeStamp'] = timeStamp;
        // 在发送请求之前做些什么，例如添加Token
        if (localStorage.getItem('token')) {
            config.headers['token'] = localStorage.getItem('token');
        }
        return config;
    },
    error => {
        // 对请求错误做些什么
        console.log(error);
        return Promise.reject(error);
    }
);

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        const res = response.data;
        if (!res.success) {
            if (res.code === 10001){ // 未登录
                //应该跳转到登录页面或者其他逻辑
                ElMessage.error(res.message)
            }else{
                ElMessage.error(res.message)
            }
        }
        return res;
    },
    error => {
        // 对响应错误做点什么
        console.log('err' + error);
        // 可能根据错误码进行不同的错误处理
        return Promise.reject(error);
    }
);

const request = (option) => {
    return new Promise((resolve,reject) => {
        service({
            url: option.url,
            data: option.data || {},
            method: option.method || 'GET'
        }).then(res=>{
            console.log(res)
            if (res.success) {
                resolve(res)
            }
        }).catch(err=>{
            reject(err)
        })
    })
}

export default request;

工具类2

import axios , { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios'
import store from '@/store'
import { ElMessage } from 'element-plus'
const baseURL = import.meta.env.VITE_BASE_URL

const service = axios.create({
  baseURL: baseURL,
  timeout: 5000
})

// 请求前的统一处理
service.interceptors.request.use(
  (config) => {
    // JWT鉴权处理
    if (store.getters['user/token']) {
      config.headers['token'] = store.state.user.token
    }
    return config
  },
  (error) => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  (response) => {
    const res = response.data
    if (res.code === 200) {
      return res
    } else {
      showError(res)
      return Promise.reject(res)
    }
  },
  (error)=> {
    console.log(error) // for debug
    const badMessage = error.message || error
    const code = parseInt(badMessage.toString().replace('Error: Request failed with status code ', ''))
    showError({ code, message: badMessage })
    return Promise.reject(error)
  }
)

// 错误处理
function showError(error) {
  // token过期，清除本地数据，并跳转至登录页面
  if (error.code === 403) {
    // to re-login
    store.dispatch('user/loginOut')
  } else {
    ElMessage({
      message: error.msg || error.message || '服务异常',
      type: 'error',
      duration: 3 * 1000
    })
  }
  
}

export default service

原生ajax

/**
 * post 请求 ，传递json参数
 */
function show() {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/send', true);
    xhr.setRequestHeader("Content-Type", "application/json");
    let data = {
        key1: "value1",
        key2: "value2"
    };
    let jsonData = JSON.stringify(data);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(jsonData);
}

ajax请求

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

// 在AJAX请求中设置Cookie
    $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos",
        method: "GET",
        dataType: 'json', //返回 JSON 数据
        xhrFields: {
            withCredentials: true
        },
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });