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

---
title: 开始
---

# {{ $frontmatter.title }}

## 安装

:::: code-group

```bash [NPM]
$ npm install -D axios-miniprogram
```

```bash [YARN]
$ yarn add -D axios-miniprogram
```

```bash [PNPM]
$ pnpm install -D axios-miniprogram
```

::::

原生小程序也可以直接[下载源码包](https://github.com/zjx0905/axios-miniprogram/releases)，但是这样是失去类型提示和 `sourceMap` 定位功能。

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

## 引用

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

:::: code-group

```ts [ES Module]
import axios, {
  // 取消令牌
  CancelToken,

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

  // 原始 Axios 类
  Axios,

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

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

axios('/test');
```

```ts [CommonJS]
const {
  // 静态对象
  // 注意：默认导出的 axios 在 CommonJS 里是以 default 属性的方式存在
  default: axios,

  // 取消令牌
  CancelToken,

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

  // 原始 Axios 类
  Axios,

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

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

axios('/test');
```

::::

不同的模块系统存在一些小差异，`esm` 会自动处理默认导入，但 `cjs` 不会处理默认导入。

```ts
// 默认导入，esm 和 cjs 这两种写法是等价关系
import axios from 'axios-miniprogram';
const axios = require('axios-miniprogram').default;

// 别名导入，esm 和 cjs 这两种写法是等价关系
import * as axios from 'axios-miniprogram';
const axios = require('axios-miniprogram');

// 具名导入，esm 和 cjs 这两种写法是等价关系
import {
  default as axios,
  CancelToken,
  isCancel,
  Axios,
  isAxiosError,
  createAdapter,
} from 'axios-miniprogram';
const {
  default: axios,
  CancelToken,
  isCancel,
  Axios,
  isAxiosError,
  createAdapter,
} = require('axios-miniprogram');
```

## 使用

### `axios(url, config?)`

可以通过把 `url` 和 `config` 传递给 `axios` 来发送请求。

注意： `config` 为选填

```ts
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` 来发送请求。

```ts
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) => {
    // 请求失败后做些什么
  });
```

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

- [axios.request(url, config?) | axios.request(config)](/basics/request)
- [axios.options(url, config?)](/method/OPTIONS)
- [axios.get(url, params?, config?)](/method/GET)
- [axios.head(url, params?, config?)](/method/HEAD)
- [axios.post(url, data?, config?)](/method/POST)
- [axios.put(url, data?, config?)](/method/PUT)
- [axios.patch(url, data?, config?)](/method/PATCH)
- [axios.delete(url, params?, config?)](/method/DELETE)
- [axios.trace(url, config?)](/method/TRACE)
- [axios.connect(url, config?)](/method/CONNECT)