Mari kita bincangkan tentang cara menggunakan axios dalam projek vue dalam artikel ini? Perkongsian penggunaan asas

Petua: Artikel ini menerangkan secara terperinci contoh aksios dalam projek vue. Apabila menggunakan rangka kerja Vue.js untuk membangunkan projek bahagian hadapan, permintaan ajax selalunya dihantar ke antara muka pelayan Semasa proses pembangunan, axios perlu dirangkumkan lagi untuk memudahkan penggunaan dalam projek. [Belajar perkongsian video: tutorial video vue, video bahagian hadapan web]

Pengenalan kepada Axios

rangka kerja axios Nama penuh (ajax - I/O - sistem):

• adalah berdasarkan promise klien http untuk penyemak imbas dan node.js, jadi anda boleh menggunakan Promise API

1. Apa yang dilakukan oleh axios?

Bercakap tentang axios kita kena bincang. mengenainyaAjax. Apabila halaman penyemak imbas lama meminta data daripada pelayan, kerana data keseluruhan halaman dikembalikan, halaman tersebut akan dipaksa untuk memuat semula, yang tidak begitu mesra pengguna. Dan kami hanya perlu mengubah suai sebahagian daripada data pada halaman, tetapi data keseluruhan halaman dihantar dari pelayan, yang menggunakan banyak sumber rangkaian. Kami hanya perlu mengubah suai beberapa data pada halaman, dan kami juga berharap untuk tidak memuat semula halaman, jadi permintaan rangkaian tak segerak wujud.

Ajax(JavaScript dan XML Tak Segerak):
Permintaan rangkaian tak segerak. Ajax membenarkan halaman untuk meminta data tanpa menyegarkan semula.

Terdapat banyak cara untuk melaksanakan ajax, seperti ajax berkapsul jQuery, XMLHttpRequest asli dan aksios. Tetapi semua kaedah mempunyai kelebihan dan kekurangan:

• Kaedah konfigurasi dan panggilan XMLHttpRequest asli sangat menyusahkan, dan sangat menyusahkan untuk melaksanakan permintaan tak segerak
• ajax jQuery sangat berbeza daripada ajax asli. Mudah digunakan, tetapi tidak perlu merujuk rangka kerja jQuery

Axios (sistem i/o ajax) kerana anda ingin menggunakan permintaan rangkaian tak segerak ajax:
Ini bukan baharu Teknologi ini pada asasnya adalah enkapsulasi XMLHttpRequest asli, yang boleh digunakan dalam penyemak imbas dan klien HTTP nodejs, tetapi ia berdasarkan Promise dan mematuhi spesifikasi ES terkini. Mempunyai ciri-ciri berikut:

• Buat permintaan XMLHttpRequest dalam penyemak imbas
• Hantar permintaan http dalam node.js
• API Janji Sokongan
• Permintaan Pemintas dan Respons
• Tukar data permintaan dan respons
• Batalkan permintaan
• Tukar data JSON secara automatik

• Sokongan pelanggan untuk menghalang CSRF/XSRF (cross Domain permintaan pemalsuan)

2. Pemasangan dan penggunaan

Terdapat tiga jenis pemasangan Kaedah:

pemasangan npm

 npm install axios

pemasangan bower

bower install axios

Perkenalkan

<script></script>

melalui cdn ke dalam main.js fail projek vue Perkenalkan axios

import axios from 'axios'
Vue.prototype.$axios = axios

dalam komponen dan gunakan axios

<script>
	export default {
		mounted(){
			this.$axios.get(&#39;/goods.json&#39;).then(res=>{
				console.log(res.data);
			})
		}
	}
</script>

3. Kaedah permintaan Axios

1 Kaedah yang boleh diminta oleh axios:

• dapatkan: Dapatkan data, permintaan ditentukan. maklumat, dan mengembalikan entiti Objek
• siaran: serahkan data kepada sumber yang ditentukan (seperti penyerahan borang atau muat naik fail)
• letakkan: kemas kini data, data yang dihantar daripada klien ke pelayan menggantikan kandungan dokumen yang dinyatakan
• tampalan: kemas kini data, yang merupakan tambahan kepada kaedah put dan digunakan untuk mengemas kini sumber yang diketahui secara tempatan
• padam: minta pelayan memadam data yang ditentukan

2 Dapatkan permintaan

Kod contoh

方法一

 //请求格式类似于 http://localhost:8080/goods.json?id=1
this.$axios.get('/goods.json',{
    			params: {
                    id:1
                }
			}).then(res=>{
					console.log(res.data);
				},err=>{
					console.log(err);
			})

方法二

this.$axios({
		method: 'get',
		url: '/goods.json',
    	params: {
            id:1
        }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})

3. Permintaan siaran

Permintaan siaran biasanya dibahagikan kepada dua jenis

1 form-data Jenis ini kebanyakannya digunakan untuk penyerahan borang, muat naik imej dan muat naik fail
2. application/json biasanya digunakan untuk ajax permintaan tak segerak

Kod contoh

方法一

this.$axios.post('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			},err=>{
				console.log(err);
			})

方法二

$axios({
	method: 'post',
	url: '/url',
	data: {
		id:1
	}
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

form-data请求

let data = {
	//请求参数
}

let formdata = new FormData();
for(let key in data){
	formdata.append(key,data[key]);
}

this.$axios.post('/goods.json',formdata).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

4 Letakkan dan tampal permintaan

Kod sampel

<.>

put请求

this.$axios.put('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			})

patch请求

this.$axios.patch('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			})

5 >Kod contoh

参数以明文形式提交

this.$axios.delete('/url',{
				params: {
					id:1
				}
			}).then(res=>{
				console.log(res.data);
			})

参数以封装对象的形式提交

this.$axios.delete('/url',{
				data: {
					id:1
				}
			}).then(res=>{
				console.log(res.data);
			})

//方法二
axios({
    method: 'delete',
    url: '/url',
    params: { id:1 }, //以明文方式提交参数
    data: { id:1 } //以封装对象方式提交参数
}).then(res=>{
	console.log(res.data);
})

6. Permintaan serentakPermintaan serentak: Buat berbilang permintaan pada masa yang sama dan proses nilai pulangan secara seragam

Kod sampel

 this.$axios.all([
	this.$axios.get('/goods.json'),
	this.$axios.get('/classify.json')
]).then(
	this.$axios.spread((goodsRes,classifyRes)=>{
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)

四、Axios实例

1、创建axios实例

示例代码

let instance = this.$axios.create({
				baseURL: 'http://localhost:9090',
				timeout: 2000
			})
			
instance.get('/goods.json').then(res=>{
	console.log(res.data);
})

可以同时创建多个axios实例。
  axios实例常用配置：

• baseURL 请求的域名，基本地址，类型：String
• timeout 请求超时时长，单位ms，类型：Number
• url 请求路径，类型：String
• method 请求方法，类型：String
• headers 设置请求头，类型：Object
• params 请求参数，将参数拼接在URL上，类型：Object
• data 请求参数，将参数放到请求体中，类型：Object

2、axios全局配置

示例代码

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

3、axios实例配置

示例代码

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

4、axios请求配置

示例代码

this.$axios.get('/goods.json',{
				timeout: 3000
			}).then()

以上配置的优先级为：请求配置 > 实例配置 > 全局配置

五、拦截器

拦截器：在请求或响应被处理前拦截它们

1、请求拦截器

示例代码

this.$axios.interceptors.request.use(config=>{
				// 发生请求前的处理

				return config
			},err=>{
				// 请求错误处理

				return Promise.reject(err);
			})

//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
    return config
})

2、响应拦截器

示例代码

this.$axios.interceptors.response.use(res=>{
				//请求成功对响应数据做处理

				return res //该返回对象会传到请求方法的响应对象中
			},err=>{
				// 响应错误处理

				return Promise.reject(err);
			})

3、取消拦截

示例代码

let instance = this.$axios.interceptors.request.use(config=>{
				config.headers = {
					token: ''
				}
				return config
			})
			
//取消拦截
this.$axios.interceptors.request.eject(instance);

六、错误处理

示例代码

this.$axios.get('/url').then(res={

			}).catch(err=>{
				//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
				console.log(err);
			})

七、取消请求

示例代码

let source = this.$axios.CancelToken.source();

this.$axios.get('/goods.json',{
				cancelToken: source
			}).then(res=>{
				console.log(res)
			}).catch(err=>{
				//取消请求后会执行该方法
				console.log(err)
			})

//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menggunakan axios dalam projek vue dalam artikel ini? Perkongsian penggunaan asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!