axios-miniprogram/docs/pages/guide/quick-start.md

3.6 KiB

title
开始

{{ $frontmatter.title }}

安装

:::: code-group

$ npm install -D axios-miniprogram
$ yarn add -D axios-miniprogram
$ pnpm install -D axios-miniprogram

::::

原生小程序也可以直接下载源码包,但是这样是失去类型提示和 sourceMap 定位功能。

建议在条件允许的情况下优先使用包管理工具安装的方式,而不是使用下载源码包的方式。

引用

可以在不同的模块系统导入需要用到的功能。

:::: code-group

import axios, {
  // 取消令牌
  CancelToken,

  // 判断取消请求错误
  isCancel,

  // 原始 Axios 类
  Axios,

  // 判断请求响应错误
  isAxiosError,

  // 创建平台适配器
  createAdapter,
} from 'axios-miniprogram';

const {
  // 取消令牌
  CancelToken,

  // 判断取消请求错误
  isCancel,

  // 原始 Axios 类
  Axios,

  // 判断请求响应错误
  isAxiosError,

  // 创建平台适配器
  createAdapter,

  // 创建实例
  create,

  // 获取系列化后的 URL
  getUri,
} = axios;

axios('test');
const {
  // 静态对象
  // 注意:默认导出的 axios 在 CommonJS 里是以 default 属性的方式存在
  // import axios from 'axios-miniprogram' 等于 const axios = require('axios-miniprogram').default
  default: axios,

  // 取消令牌
  CancelToken,

  // 判断取消请求错误
  isCancel,

  // 原始 Axios 类
  Axios,

  // 判断请求响应错误
  isAxiosError,

  // 创建平台适配器
  createAdapter,
} = require('axios-miniprogram');

const {
  // 取消令牌
  CancelToken,

  // 判断取消请求错误
  isCancel,

  // 原始 Axios 类
  Axios,

  // 判断请求响应错误
  isAxiosError,

  // 创建平台适配器
  createAdapter,

  // 创建实例
  create,

  // 获取系列化后的 URL
  getUri,
} = axios;

::::

使用

axios(url, config?)

可以通过把 urlconfig 传递给 axios 来发送请求。

注意: config 为选填

import axios from 'axios-miniprogram';

// 默认发送 GET 请求
axios('https://api.com/test')
  .then((response) => {
    // 请求成功后做些什么
  })
  .catch((error) => {
    // 请求失败后做些什么
  });

// 发送 POST 请求
axios('https://api.com/test', {
  method: 'POST',
})
  .then((response) => {
    // 请求成功后做些什么
  })
  .catch((error) => {
    // 请求失败后做些什么
  });

axios(config)

也可以直接把 config 传递给 axios 来发送请求。

import axios from 'axios-miniprogram';

// 默认发送 GET 请求
axios({
  url: 'https://api.com/test',
})
  .then((response) => {
    // 请求成功后做些什么
  })
  .catch((error) => {
    // 请求失败后做些什么
  });

// 发送 POST 请求
axios({
  url: 'https://api.com/test',
  method: 'POST',
})
  .then((response) => {
    // 请求成功后做些什么
  })
  .catch((error) => {
    // 请求失败后做些什么
  });

也可以使用请求方法简化请求。