api封装请求的过程_api封装是什么意思

1，api封装是为了简便的请求数据
首先一般项目会有一个request文件，一个api文件和一个manager文件
request这个文件主要设置响应头，请求拦截和请求响应的一些处理
api文件是为了将所有的请求封装成一个方法，并暴露出来，让你的组件去调用
manager是为了定义不同的请求方式

出现了3个文件，如果组件调用，不可能调用3个文件，然后去一个一个处理，肯定是最后只调用api文件，依赖关系就是api文件调用manager(里面有请求方式），然后manager调用request（里面有请求拦截和响应方法）

先设置request文件
首先做请求相关的，必须得有一个请求，这里我们就用axios来发送请求，你也可以ajax或者其他来请求
安装axios,使用命令

npm install axios
1

然后引入

import axios from 'axios'
1

1，配置请求的url

const requests = axios.create({
  // 基础url,如果是多环境配置这样写，也可以像下面一行的写死。
  baseURL: 'http://43.53.19.102:120/jeecg-boot/', 
  // baseURL: 'http://localhost:120/jeecg-boot/',
  timeout: 6000 // 请求超时时间
})
1
2
3
4
5
6

这个端口就写自己的请求地址，这个示例端口是请求不了的

2，配置请求头

requests.interceptors.request.use(config => {
  console.log(config)
  // 需要授权的 API ，必须在请求头中使用 `Authorization` 
  // 字段提供 `token` 令牌
  const token = window.sessionStorage.getItem('X-Access-Token')
  if (token != null) {
    config.headers['X-Access-Token'] = token
  }
  // 在最后，必须 return config;
  return config
},
error => {
  //  这里处理一些请求出错的情况
  Promise.reject(error)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3,配置拦截器

// response 拦截器
requests.interceptors.response.use(
  response => {
    console.log(response)
    // 这里处理一些response 正常放回时的逻辑
    // 返回的情况很多，还有300,500等怎么处理
    // if (res.code === 401) {
    //   if (sessionStorage.getItem('X-Access-Token')) {
    //     sessionStorage.removeItem('X-Access-Token')
    //   }
    //   router.push('/login')
    // }
    return response.data
  },
  error => {
    // 这里处理一些response 出错时的逻辑
    return Promise.reject(error)
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4，将这个文件暴露出去

export default requests
1

4步我们就将基本的请求相关事项弄好了，然后我们还需要设置请求方式

请求方式
1，引入我们设置好的request文件

import axios from '../config/request'
1

2，post请求

// post
export function postAction (url, parameter) {
  return axios({
    url: url,
    method: 'post',
    data: parameter
  })
}
1
2
3
4
5
6
7
8

3，post 或者 put 可以这样写

// post method= {post | put}
export function httpAction (url, parameter, method) {
  return axios({
    url: url,
    method: method,
    data: parameter
  })
}
1
2
3
4
5
6
7
8

4，配置put请求

// put
export function putAction (url, parameter) {
  return axios({
    url: url,
    method: 'put',
    data: parameter
  })
}
export function putRestAction (url) {
  return axios({
    url: url,
    method: 'put'
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5，get请求

// get
export function getAction (url, parameter) {
  return axios({
    url: url,
    method: 'get',
    params: parameter
  })
}
1
2
3
4
5
6
7
8

6，delete请求

// deleteAction
export function deleteAction (url, parameter) {
  return axios({
    url: url,
    method: 'delete',
    params: parameter
  })
}
1
2
3
4
5
6
7
8

然后设置好请求方式后，设置api.js文件

import {
  getAction,
  postAction, putAction
} from './manager'
1
2
3
4

引入manager.js文件里面的方法

// 登录管理
const login = (params) => postAction('login/login', params)
1
2

给相关的接口设置相应的管理以及注释，如果有改动，那就可以直接更改

在相应的组件中，开始使用设置好的接口

import axios from 'axios'
import { login } from '../api/api'
1
2

使用相关的方法去请求

 data () {
    return {
      loginForm: {
        mobilePhone: '',
        code: '',
        type: 0
      },
      checked: false,
      flag: true
    }
  },
1
2
3
4
5
6
7
8
9
10
11

第一个就是请求的数据，发送包含手机号的内容，如果成功就返回token，并将token存入本地，并跳转到index页面，否则就登录失败

login({
          mobilePhone: this.loginForm.mobilePhone
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            window.sessionStorage['X-Access-Token'] = res.data.token
            this.$router.push('/index')
          } else {
            this.checkNumber('登录失败','error')
          }
        })
1
2
3
4
5
6
7
8
9
10
11