vue项目全局api接口封装

项目通常情况下，api封装放在src 下utils 文件下 request.js

// 安装 axios 
cnpm install axios --save

// 新建request.js
// 通常项目的拦截，封装方法都封装在这里

import axios from 'axios'

const instance = axios.create({
    headers: {
        'content-type': 'application/json;charset=UTF-8',
        'token': 'one' 
    },
    baseURL: 'https://........',
    timeout: 10000,
    withCredentials: true
})

// 添加请求拦截器
instance.interceptors.request.use(config => {
    // 在发送请求之前做某事，比如说 设置token
    config.headers['token'] = 'token';
    return config;
}, error => {
    // 请求错误时做些事
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
    // 对响应数据做些事
    if (response.status === 200) {
        console.log(response,123)
        if (response.data && response.data.data.code === 1) {
            console.log('成功')
            response.data.data.value = '我是返回成功' // 在请求成功后可以对返回的数据进行处理，再返回到前台
        } else {
            console.log('返回到登录...')
        }
    }
    return response;
}, error => {
    return Promise.reject(error.response.data); // 返回接口返回的错误信息
})

export default instance;


// 创建api 文件夹（放置.js接口文件）

import request from '@/utils/request' // 引入request 方法文件


export function open(data) { // 封装api接口方法
    return request({
        url: '/Units/SelectAllOne',
        method: 'get',
        params:data
    })
}


// 在页面中使用

 methods:{
    aa(){
      open({pageNum:1,
            pageSize:50,
            wellId:13}).then(res => {
        console.log(res);
      })
    }
  }