vue2.0 axios封装

 

 

/**

 * 请求核心函数

 * @param {Object} options 请求配置

 */

function request(options) {

  options.method = options.method || 'get'; // 如果是get请求的话,则将data中的数据转移到params中

  if (options.method.toLowerCase() === 'get') {

    options.params = options.data;

  }

  if (process.env.NODE_ENV === 'production') {

    // 在正式环境中,不管有没有开启moke开关,都使用正式环境base_url,以防万一

    service.defaults.baseURL = process.env.VUE_APP_BASE_API;

  } else {

    // VUE_APP_MOCK为1,代表开启moke模式

    service.defaults.baseURL =

      process.env.VUE_APP_MOCK == '1' ? process.env.VUE_APP_MOCK_API : process.env.VUE_APP_BASE_API;

  }

  return service(options);

}

/**

 * 可以通过 request.get() 方式调用

 */

['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {

  request[item] = (url, data, options) => {

    return request({

      method: item,

      url,

      data,

      ...options,

    });

  };

});

export default request;

 在axios封装中的request中引用 搭配apis全局挂载统一api

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中使用axios进行网络请求的封装,可以方便地统一处理请求和响应,提高代码复用性和可维护性。以下是一个简单的示例: 1. 安装axiosvue-axios: ```bash npm install axios vue-axios ``` 2. 在main.js中引入并配置axiosvue-axios: ```javascript import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); ``` 3. 创建一个api.js文件,用于封装接口请求方法: ```javascript import axios from 'axios'; const apiClient = axios.create({ baseURL: 'http://api.example.com/', // 设置基本URL timeout: 5000 // 设置请求超时时间 }); export const get = (url, params) => { return apiClient.get(url, { params }); }; export const post = (url, data) => { return apiClient.post(url, data); }; ``` 4. 在组件中使用封装的接口请求方法: ```javascript import { get, post } from '@/api'; export default { methods: { fetchData() { get('/data').then(response => { // 处理成功响应 console.log(response.data); }).catch(error => { // 处理错误响应 console.error(error); }); }, submitData() { const data = { /* 数据对象 */ }; post('/data', data).then(response => { // 处理成功响应 console.log(response.data); }).catch(error => { // 处理错误响应 console.error(error); }); } } }; ``` 这样,你就可以在Vue组件中方便地调用封装好的get和post方法进行网络请求了。注意,在实际项目中,你可能还需要处理loading状态、错误处理、请求拦截、响应拦截等功能,这些可以根据具体需求进行补充和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值