vue的基本使用方式二

最新推荐文章于 2024-08-16 18:15:23 发布

℡ 柒月.

最新推荐文章于 2024-08-16 18:15:23 发布

阅读量228

点赞数 4

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/2301_81705218/article/details/140961325

版权

六.axios

Axios 是一个基于 promise 的网络请求库，作用于浏览器和 nodejs 中

1.安装命令：

npm install axios

<1>这样就安装成功了

<2>检查package.jsonaa看看是否有axios的代码生成

2.导入命令：

import axios from 'axios';

导入实例

3.使用axios

(1) axios的API列表

axios.get(url, config)       ★
axios.delete(url, config)
axios.head(url, config)
axios.options(url, config)
axios.post(url, data, [, config])
axios.put(url, data, [, config])
axios.patch(url, data, [, config])

(2) 参数说明：

url：请求路径
data：请求体数据，最常见的是JSON格式数据
config：配置对象，可以设置查询参数、请求头信息

(3)为了解决跨域问题，可以在vue.config.js 文件中配置代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070,//前端域名
    proxy: {
      '/api': {
        target: "http://localhost:8080",//后端域名
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

在 vue.config.js 文件中配置代理，可以解决开发环境中的跨域请求问题。
defineConfig 函数用于定义项目的配置。
transpileDependencies 设置为 true，表示需要转译依赖。
devServer 对象包含了开发服务器的配置，其中 port 设置为 7070，表示开发服务器运行在7070端口。
proxy 对象定义了代理的规则，这里配置了当请求路径以 /api 开头时，请求将被代理到 http://localhost:8080。
pathRewrite 对象用于重写请求的路径，这里将 /api 路径前缀重写为空字符串，即去掉 /api 前缀。

(4) axios的post、get方法示例：

axios.post('/api/admin/employee/login', {
  username: 'admin',
  password: '123456'
}).then(res => {
  console.log(res.data)
}).catch(error => {
  console.log(error.response)
})

axios.get('/api/admin/shop/status', {  //获得店铺的连接状态
  headers: {//第二个参数对象
    token: "xxx.yyy.zzz"//post返回的token
  }
})

使用 axios.post 方法发送一个POST请求到 /api/admin/employee/login 路径，请求体中包含用户名 admin 和密码 123456。
.then 方法用于处理请求成功的情况，打印响应数据 res.data。
.catch 方法用于处理请求失败的情况，打印错误响应 error.response。
使用 axios.get 方法发送一个GET请求到 /api/admin/shop/status 路径，请求配置中包含自定义的请求头 headers，其中 token 字段用于传递认证令牌。

(5)不管post或者是get, `axios可以用一个统一的方式来发送请求`

axios统一使用方式：axios(config)
//发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

使用 axios 函数并通过传递一个配置对象来发起请求，这种方式可以适用于不同类型的HTTP请求。
method 属性指定了请求的方法，这里是 'post'。
url 属性定义了请求的URL地址，这里是 /user/12345。
data 属性包含了请求体数据，这里是一个对象，包含 firstName 和 lastName 两个字段

`(6)axios同意请求方式的代码示例`

axios({
  url: "/api/admin/employee/login",
  method: "post",
  data: {
    username: "admin",
    password: "123456"
  }
}).then((res) => {
  console.log(res.data.data.token);
  axios({
    url: "/api/admin/shop/status",
    method: "get",
    params: { id: 1 }, 
    headers: {
      token: res.data.data.token
    }
  }).catch((error) => {
    console.log(error);
  });
});