首頁(yè) > 博客列表 > webpack 中使用 axios 方法總結(jié)及初識(shí) vue

博主信息

博文 49

粉絲 0

評(píng)論 0

訪問(wèn)量 49440

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

webpack 中使用 axios 方法總結(jié)及初識(shí) vue

webpack 中使用 axios 方法總結(jié)

在根目錄先建配置文件，以根目錄名為 demo 為例，下述為 demo
npm init -y
安裝 webpack webpack 腳手架 webpack 開(kāi)發(fā)環(huán)境服務(wù)器
webpack webpack-cli webpack-dev-server
創(chuàng)建代碼存放文件夾 src 及建好主入口文件跟 html 文件

src > index.js index.html
在 demo 文件夾下建好 webpack 配置文件

webpack.config.js
安裝 html 打包插件
npm i html-webpack-plugin -D
導(dǎo)入 html 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
打包查看打包情況
webpack
使用 webpack server 服務(wù)器，編寫(xiě)代碼保存刷新即時(shí)生效，Ctrl+C 可以退出
webpack serve
線上環(huán)境安裝 axios
npm i axios -S
在 index.js 文件里導(dǎo)入 axios
import axios from 'axios
axios get 與 post 的區(qū)別
- get 的參數(shù)存在 params 中，post 的參數(shù)存在 data 中
- 用 post 方法時(shí)，需要處理請(qǐng)求頭
```
headers: { 'content-type': 'application/x-www-form-urlencoded' }
```
axios 請(qǐng)求方式
- axios.request(config)
- axios.get(url[, config]) 請(qǐng)求
- axios.delete(url[, config]) 刪除
- axios.post(url[, data[, config]]) 發(fā)送
- axios.head(url[, config])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
axios 處理并發(fā)請(qǐng)求
跟 promise 一樣使用 axios.all()

axios 攔截器

請(qǐng)求攔截器

axios.interceptors.request.use((config) => {
  console.log("########");
});

響應(yīng)攔截器

axios.interceptors.response.use()((config) => {
  console.log("########");
});

axios 全局配置

//主地址
axios.defaults.baseURL = "http://127.0.0.1";
//延時(shí)時(shí)間
axios.defaults.timeout = 5000;
//post請(qǐng)求頭
axios.defaults.headers.post["content-type"] = "application/x-www-form-urlencoded";

axios 實(shí)例封裝
由于現(xiàn)在大部分都是多服務(wù)器，且不同服務(wù)器超時(shí)時(shí)長(zhǎng)不一樣，沒(méi)法將后臺(tái)所有域名都加到 url 中，可以再封裝一個(gè) axios 來(lái)執(zhí)行
```
const instance = axios.create({
  url: "http://localhost.com",
  timeout: 3000,
  method: "post",
});
instance.get("http://localhost.com");
```

初識(shí) vue

全局安裝
npm i @vue/cli -g
查看版本
vue -V
創(chuàng)建項(xiàng)目
vue create '項(xiàng)目名'
public 文件夾
里面的內(nèi)容會(huì)原封不動(dòng)的打包到編譯目錄下
src>assets 文件夾
存放靜態(tài)資源，如圖片、css 等
components 文件夾
存放組件，如按鈕、卡片、分頁(yè)、滑動(dòng)條等
運(yùn)行服務(wù)器
npm run serve

創(chuàng)建內(nèi)容及注意事項(xiàng)

vue 文件

<template>
  <!-- div外層標(biāo)簽必須有，標(biāo)簽內(nèi)內(nèi)容都填在這里面 -->
  <div>
    {{ msg }}
    <hr />
    {{ info() }}
  </div>
</template>
<script>
export default {
  name: "App2",
  data() {
    return {
      msg: "this is a test",
      name: "admin",
    };
  },
  methods: {
    info() {
      return `my name is ${this.name}`;
    },
  },
};
</script>
<style scoped></style>

-js 主入口文件

import { createApp } from "vue";
// 這里導(dǎo)出的是匿名的 就隨意起名就是了 不要用解構(gòu)賦值 沒(méi)值啊，用了會(huì)有問(wèn)題
import App2 from "./App2.vue";
createApp(App2).mount("#app");

html 主入口文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

批改老師：

autoload

批改狀態(tài)：合格

老師批語(yǔ)：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

git 使用整理

2022-02-22 15:33:52

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

webpack 中使用 axios 方法總結(jié)及初識(shí) vue

webpack 中使用 axios 方法總結(jié)

初識(shí) vue