vue封装axios数据请求及调用

在vue项目中使用axios数据请求，把axios封装在js文件中，接口直接封装在内，页面直接引入使用的方法。

1. npm 安装 axios 或者 bower 安装 axios

• 使用 npm:
  npm install axios
• 使用 bower:
  bower install axios

2. 在自定义js文件中配置axios

• 引入axios
  import axios from “axios”
• 配置url

const service = axios.create({
    baseURL: 'http://192.168.1.149:6240/api/',  //请求的地址
    timeout: 5000  //访问超时的时间限制
});

• 导出方法
  export default service

3. 配置封装接口的js文件

• 引入刚刚配置完的axios的js文件
  我这里自定义的名字为request
  import request from '…/…/utils/request’

• 配置url

// Get请求：
export function testGet(参数) {
  return request({
    method: 'get',
    url: '具体接口',
    params: {
      //json格式，如果有就写，没有就去掉。
    }
  })
}
// Post请求：
export function testPost(参数) {
  const data = {}  //写要传递的参数，json格式
  return request({
    method: 'post,
    url: '具体接口',
    datatype: 'json',
    data
  })
}

4. 使用封装后的接口进行数据请求

• 引入
  import {要引入的方法名字} from xxx.js

• 使用
  放在当前页面methods使用的方法里
  引入方法名().then(res=>{ //成功进这个 }).catch(err=>{ //报错进这个});