[Day 28] axios 这麽多API到底要放哪阿?

目前用到的api

前一篇有介绍axios的基本操作了，我先整理一下目前每个页面用到的api

HomePage 首页
- 图片轮播
- 热门排行榜(免费、付费)

TopicPage 主题推荐
- 主题清单

FestivalPage 节庆活动
- 节庆清单

FestivalDetailPage 节庆详细页面
- 节庆详细资料

光是这些简单的功能就需要5支api，可以想像当功能愈复杂、系统愈庞大，api的数量也会更多

api 到底要放哪？

想像一下，如果今天我想要把热门排行榜显示在每个页面，是不是在每一页都要加上api？

那如果我今天突然想修改api名称，或是参数名称呢？

是不是要去找这支api用在哪里，然後再一页一页去更改？

//此为范例
axios.get('http://127.0.0.1/api/bookList', {
    params: { 
      pageIndex: 1,
			pageSize: 20,
    }
  })
  .then(function (response) { // 成功後要做的事
    console.log(response);
  })
  .catch(function (error) { // 失败後要做的事
    console.log(error);
  });

或是像我之後有一部分的api要从open api拿，另外一半的api要从後端拿，修改时就还要去判断网址，想一想就觉得挺麻烦的

建立实例 axios.create

那为了避免这样的状况，我习惯会把api从页面独立出来，

让每一页只需要引用api方法，带上参数就好，不用管这只api是要戳哪个url。

axios 这边提供了一个方法 The Axios Instance，可以使用自定义配置建立实例 (Instance)

const 实例名称 = axios.create({
	//这边放要共用的 request config
});

// 官方范例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/', //api的前缀网址
  timeout: 1000,                          // api timeout时间
  headers: {'X-Custom-Header': 'foobar'} // api header要带的参数
});

request Config (api参数)

官方定义了很多种，不过比较常用到的就是那几个，可以参考官方文件

baseURL 就是api的前缀网址，使用时後面会再串接不同的 request url

在实例中的参数，会跟使用api时带的参数合并

以下是这个实例可以使用的方法，比较常用的就是get、post

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

// When using the alias methods url, method, and data properties don't need to be specified in config.

使用实例的方法

写个范例比较好懂，使用时只有 url 是必要的，其他的参数都可以不用带

// 1. get
// 要连到 https://some-domain.com/api/bookList?page=5
instance.get('/bookList',{
    page: "5",
}.then(res=> {
    console.log(res);
})

// 2. post
// 要连到 https://some-domain.com/api/login
// 并带上参数 account 跟 password
instance.post('/login',{
    account: "user666",
    password: "123456789"
}.then(res=> {
    console.log(res);
})

再更简化一点可不可以？

那可能有人会想说~

这样我还是要每页都放url阿，还不是一样

没错！

所以在 api的页面用axios.create() 建立实例後，要再把它封装成一个方法，

里面直接就包含需要的request config了

直接看范例

//api.js
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/', //api的前缀网址
});
export const getBookList = data => instance.get('/bookList', data);

// 封装成 getBookList後，到vue页面呼叫方法
// BookListPage.vue
import { getBookList } from '../api/api';
getBookList ({
    page: 5,
})
.then(res=> {
    console.log(res);
})

这样就真的把api集中管理了，如果要改url 只要在api.js调整即可

当系统功能很多时，这个就会大大的降低维护的困扰

推荐阅读

使用Axios时你的API都怎麽管理？

axios的用法介绍差不多到这啦~

他其实还有蛮多参数可以研究的，不过这边用不到就先不提

目前提到的这些用法应该可以满足大部分需求了

那明天就来把api都换上去!