vue案例之——axios网络层封装

我们平常在开发项目中,会经常用到axios发送请求,axios基于 promise对原生的ajax进行了一定封装 直接使用当然很方便。但是我们在写一个真实的上线项目时,直接用axios就会使项目变得不易维护。下面就用我自己的方式来对axios进行一个简单的封装。

axios我已经安装 (npm install axios -S)

首先在项目中创建一个文件夹 (这里叫network):

  1. 第一步 创建 service.js文件,里面主要是配置的axios 拦截器 最后导出一个对象。(我做的是移动端项目 所用的是vantUI,也可以用别的组件库)
import { Toast } from 'vant'

const tip = msg => {
  Toast.loading({
    message: msg,
    duration: 1000,
    forbidClick: true
  });
}

const { baseURL } = require('../config/env.' + process.env.NODE_ENV + ".js")


const instance = axios.create({
	//基本url配置
  baseURL: "",
  //超时时间 超出该时间 就会拦截请求
  timeout: 10000
});

instance.interceptors.request.use(function (config) {

  if (!config.hideloading) {

    tip("加载中..")

  }
//这里是判断用户是否登陆 是根据store中是否有token,如果有就把它加到请求头中
  if (store.state.token) {
    config.headers.token = store.state.token
  }
  return config;

}, function (error) {

  console.log("========>", error);
  return Promise.reject(error);
});



我这里的token是请求服务器,服务端同意连接给我返回的token,我将它存到了vuex中

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  Toast.clear()
  const res = response.data
  if (res.status && res.status !== 200) {
    // 登录超时,重新登录
    if (res.status === 401) {
      store.dispatch('FedLogOut').then(() => {
        location.reload()
      })
    }
    return Promise.reject(res || 'error')
  } else {
    return Promise.resolve(res)
  }

}, function (error) {

  Toast.clear()
  console.log('err' + error) // for debug


  return Promise.reject(error);
});

export default instance

这就是network中的核心配置 axios拦截。

2.然后就是我们项目要发送请求的核心方法 :

request.js 代码如下:

post请求的时候,我们需要加上一个请求头,所以可以在这里进行一个默认的设置,即设置post的请求头为 application/x-www-form-urlencoded;charset=UTF-8

// 设置post请求头

service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

import request from './service'
import {login, register, verifyPhone, phonecode, username, } from "./http";

export function Login(data) {
  return request({
    url: login,
    method: 'post',
    data,
    hideloading: true
  })

}
export function Register(data) {
  return request({
    url: register,
    method: 'post',
    data,
    hideloading: true
  })
}
export function VerifyPhone(params) {

  return request({
    url: verifyPhone,
    method: "get",
    params,
    hideloading: true
  })

}

// 手机验证吗
export function Phonecode(params) {

  return request({
    url: phonecode,
    method: "get",
    params,
    hideloading: true
  })

}
export function Checkusername(params) {

  return request({
    url: username,
    method: "get",
    params,
    hideloading: true
  })

}

注意若是post请求,按照规范参数体应该为data形式

以下是项目的所用到的接口:

  1. http.js 配置如下:
const api= {

  login: "/LoginPage/Login",
  
  register: '/LoginPage/AddLogin',

  verifyPhone: "/Verify/GetPhone",
 
  phonecode: '/SMSCode/GetCode',
 
  username: '/Verify/LoginName',


}

module.exports = api

具体用法:

<script>

import { login } from "../network/request";

created(){
		Login().then((res) => {
  			console.log(res);
        }).catch((err) => {
			console.log(error)
		});
}
 
</script>



axios的基本配置到这里已经差不多了,我们只需要在组件中按需引入就好了,还需要注意的是,如果有多个环境变量,还要配置一下环境(开发、测试、生产)

eg:
创建config目录。
目录下创建 env.development.js+env.production.js+env.test.js

env.development.js 内容如下:

module.exports={
    baseUrl:' http://www.devele.com:4456' //开发环境用到的baseurl
}

// 环境的切换
const {baseUrl}=require('../config/env.'+process.env.NODE_ENV);

//同时 package.json的scripts需指定测试环境的模式  --mode test
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  }

const service = axios.create({
  baseURL: baseUrl, // url = base api url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 1000*12 // 请求超时
})

### 如何在 Vue 中集成 DeepSeek 模型 DeepSeek 是一种先进的大语言模型,通常用于自然语言处理任务。要在 Vue.js 应用程序中集成 DeepSeek 模型,可以遵循以下方法来实现前后端分离架构下的调用逻辑。 #### 1. 后端服务部署 为了使前端能够访问 DeepSeek 的推理功能,需先设置后端 API 接口作为中介层。以下是推荐的技术栈和流程: - **安装 Hugging Face Transformers 和 Flask/Django** 可通过 Python 脚本加载预训练的 DeepSeek 模型并提供 RESTful API 支持[^2]。 ```python from flask import Flask, request, jsonify import torch from transformers import AutoTokenizer, AutoModelForCausalLM app = Flask(__name__) tokenizer = AutoTokenizer.from_pretrained("deepseek/large") model = AutoModelForCausalLM.from_pretrained("deepseek/large") @app.route('/predict', methods=['POST']) def predict(): data = request.json input_text = data['text'] inputs = tokenizer(input_text, return_tensors="pt").input_ids.to('cuda' if torch.cuda.is_available() else 'cpu') outputs = model.generate(inputs, max_length=50) result = tokenizer.decode(outputs[0], skip_special_tokens=True) return jsonify({"response": result}) if __name__ == '__main__': app.run(debug=True) ``` 此代码片段展示了如何创建一个简单的 Flask Web 服务器,并暴露 `/predict` 端点供客户端请求。 #### 2. 前端部分 (Vue.js 实现) 对于前端开发人员来说,在 Vue 组件内部发起 HTTP 请求到上述定义好的后端接口即可完成交互操作。 ##### 创建 Axios 实例 建议封装axios 工具类以便统一管理网络通信行为[^1]: ```javascript // src/utils/apiClient.js import axios from 'axios'; const apiClient = axios.create({ baseURL: 'http://localhost:5000/', // 替换为实际运行的服务地址 }); export default apiClient; ``` ##### 编写业务逻辑组件 下面是一个示例性的对话框界面设计案例说明如何利用刚才提到过的工具函数向远程主机发送数据获取预测结果展示给用户查看: ```vue <template> <div class="container"> <textarea v-model="inputText" placeholder="Enter your text here..."></textarea> <button @click="submit">Submit</button> <p>{{ outputResponse }}</p> </div> </template> <script> import apiClient from '@/utils/apiClient'; export default { name: 'DeepSeekIntegration', data() { return { inputText: '', outputResponse: '' }; }, methods: { async submit() { try { const response = await apiClient.post('/predict', { text: this.inputText }); this.outputResponse = response.data.response; } catch (error) { console.error(error); } } } }; </script> <style scoped> .container { display: flex; flex-direction: column; } textarea { height: 100px; } </style> ``` 以上代码实现了基本的功能需求——允许输入一段文字并通过点击按钮触发事件从而得到由后台计算得出的回答内容显示出来。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值