网络请求

作为前端的开发接口调用，网络请求也是重要的一环。下面是两种常用的库。

axios

axios 不是一种新的技术。它是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。此项目中已经包含 axios 使用方法详见： github/axiosopen in new window 下面给俩例子:

import axios from 'axios'
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response)
  })
  .catch(function (error) {
    // handle error
    console.log(error)
  })
  .finally(function () {
    // always executed
  });

// use async/await Send a POST request
async function getUser() {
  try {
    const response = await axios.post('/user',{
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
    console.log(response)
  } catch (error) {
    console.error(error)
  }
}

具体其他API详情请跳转到: axios官网open in new window

fetch

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，Fetch函数就是原生js，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。使用方法详见： javascript/fetchopen in new window

// 普通url和get
let response = await fetch('/user?ID=12345')
if (response.ok) { // 如果 HTTP 状态码为 200-299
  // 获取 response body（此方法会在下面解释）
  let json = await response.json()
} else {
  alert("HTTP-Error: " + response.status)
}

// 下面这段代码以 JSON 形式 POST 发送 user 对象：
let user = {
  name: 'John',
  surname: 'Smith'
}
let response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
})
let result = await response.json()

具体其他API详情请跳转到: fetch官网open in new window

推荐：封装好的request

本项目已集成和沿用了@fesjs/plugin-request 它是基于 fetch 封装的 request，内置防止重复请求、请求缓存、错误处理等功能。详细文档可跳转到：@fesjs/plugin-requestopen in new window 下面给俩例子:

// 普通url和get
import { request } from '@fesjs/fes'

request('/api/login', {
    username: 'robby',
    password: '123456',
},{ method:"POST" })
.then((res) => {
    // do something
})
.catch((err) => {
    // 处理异常
});

//结合 use 使用 
import { useRequest } from '@fesjs/fes'

export default {
    setup() {
        const { loading, data, error } = useRequest('/api/login', {
            username: 'robby',
            password: '123456',
        })
        return {
            loading,
            data,
            error,
        }
    },
}

运行时配置具体参数

入口文件的全局配置，具体请求的配置参数会覆盖全局配置，支持 fetchopen in new window 所有的参数。

import { defineRuntimeConfig } from '@fesjs/fes'

export default defineRuntimeConfig({
    request: {
        baseURL: '',
        timeout: 10000, // 默认 10s
        method: 'POST', // 默认 post
        mergeRequest: false, // 是否合并请求
        responseType: null, // 可选 'json' | 'text' | 'blob' | 'arrayBuffer' | 'formData'，默认根据 content-type 处理
        credentials: 'include', // 默认 include, 'include' | 'same-origin' | 'omit'
        headers: {}, // 传给服务器的 header
        cacheData: false, // 是否缓存
        requestInterceptor: (config: Config) => Config,
        responseInterceptor: (response: RequestResponse) => RequestResponse,
        transformData(data, response) {
            // 处理响应内容异常
            if (isPlainObject(data)) {
                if (data.code === '10000') {
                    return Promise.reject(data);
                }
                return data?.result ? data.result : data
            }
            return data
        },
        // http 异常，和插件异常
        errorHandler(error) {
            // 处理业务异常，例如上述 transformData 抛出的异常
            if (error.code) {
                console.log(error.msg)
            } else if (error.response) {
                // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
                console.log(`服务异常：${error.response.status}`)
            } else {
                // 请求异常
                console.log(error.msg || error.message || `请求失败`)
            }
        },
        // 支持其他 fetch 配置
        ...otherConfigs,
    },
});

request API

request

类型：函数
详情：请求后端接口
参数：
- url: 后端接口 url
- data: 参数
- options: 配置支持 fetchopen in new window 所有的参数，和插件扩展参数。
返回值: Promise

useRequest

request 的封装，返回响应式 loading、error、 data

async/await request

如果想使用 async/await 发送请求。具体可参照项目例子中的使用：源码位置:loadGeojsonopen in new window

import { request } from '@fesjs/fes'
export const loadGeojson = (filepath, dataType) => new Promise((resolve, reject) => {
	request(filepath, {}, { method: 'get' })
		.then((res) => {
			if (dataType) {
				resolve(res.dataType)
			}
			resolve(res.features)
		})
		.catch((err) => {
			console.err(err)
			reject(error)
		})
})

网络请求

# axios

# fetch

# 推荐：封装好的request

# 运行时配置 具体参数

# request API