api封装使用

本文使用axios请求，先在require中配置服务器请求拦截，并添加token，本文模拟token添加1111，域名使用的本地域名，需要自己配置一下。token可以使用cookie，放入cookie中获取添加当请求头中。

import axios from 'axios'

// 创建axios对象
let service = axios.create({
  baseURL: 'http://127.0.0.1:3001', // 请求接口的域名
  timeout: 9000 // 请求的超时
})

// 添加请求拦截器,
service.interceptors.request.use(
  request => {
    // 设置请求的头信息
    request.headers = {
      token: `1111`, // 请求添加的token
      'Content-Type': 'application/json;charset=utf-8'
    }
    return request
  },
  error => {
    Promise.reject(error)
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    Promise.reject(error)
  }
)

export default service

 

2，创建一个接口文件，统一把接口放入这个js中，使用时直接拿取，合理运用封装模块

// 所有接口地址
export default {
  exhibitionHotUrl: '/api/exhibition/list',
}

 

3,封装api，使用直接拿取api请求

import requset from '../utils/request'
import apiUrl from '../utils/apiUrl'

// 获取数据
export const getExhibitionList = params => {
  return requset({
    url: apiUrl.exhibitionHotUrl,
    method: 'get',
    params
  })
}
}

 

4，最后页面使用可以使用

//获取
import {getExhibitionList} from '../../api/index'

getExhibitionHotList = async () => {

  // await 调用
  const result = await getExhibitionList({
  可以在这里写需要传递的参数
  })
  if (result.code === 200) {
    this.setState({
    //成功数据赋值
      exhibitionList: result.data.list
    })
  }
}